<!DOCTYPE html>
<html style="height: 100%;"><head>
	<title>jQuery DataTables in Java Web Applications - CodeProject</title> 
	<link type="text/css" rel="stylesheet" href="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/Main.css">

	
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Description" content="Enhancing simple tables implemented in Java web applications using the jQuery DataTables plug-in.; Author: Jovan Popovic; Updated: 26 Apr 2012; Section: Java; Chapter: Languages; Updated: 26 Apr 2012">
<meta name="Keywords" content="Java, Ajax, jQuery, DataTable,Java,Languages,Free source code, tutorials">
<meta name="Author" content="Jovan Popovic">
<meta name="Rating" content="General">
<meta name="Robots" content="index, follow, NOODP">
<meta name="Revisit-After" content="1 days">
<meta name="application-name" content="CodeProject">
<meta name="google-translate-customization" content="d908bb7ce7aff658-4c2f3a504525c916-g629383f736781a8a-13">

<link rel="dns-prefetch" href="http://ajax.googleapis.com/"> 
<link rel="canonical" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications">


<link rel="alternate" type="application/rss+xml" title="CodeProject Latest articles - All Topics" href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=1">
<link rel="alternate" type="application/rss+xml" title="CodeProject Latest articles - Android" href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=22">
<link rel="alternate" type="application/rss+xml" title="CodeProject Latest articles - iOS" href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=25">
<link rel="alternate" type="application/rss+xml" title="CodeProject Latest articles - C++" href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=2">
<link rel="alternate" type="application/rss+xml" title="CodeProject Latest articles - C#" href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=3">
<link rel="alternate" type="application/rss+xml" title="CodeProject Latest articles - Web" href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=23">
<link rel="alternate" type="application/rss+xml" title="CodeProject Lounge Postings" href="http://www.codeproject.com/webservices/LoungeRSS.aspx">
<link rel="search" type="application/opensearchdescription+xml" title="CodeProject" href="http://www.codeproject.com/info/OpenSearch.xml">

	<!-- base href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications" -->
	<link rel="icon" href="http://www.codeproject.com/favicon.ico" type="image/ico">
<link rel="shortcut icon" href="http://www.codeproject.com/favicon.ico" type="image/ico">
<link rel="apple-touch-icon" href="http://www.codeproject.com/images/FavIcon-Apple.png" type="image/png">
<script type="text/javascript" language="Javascript">//<![CDATA[
function defrm () { /* thanks twitter */ document.write = ''; window.top.location = window.self.location;  setTimeout(function() { document.body.innerHTML = ''; }, 0);  window.self.onload = function(evt) { document.body.innerHTML = ''; }; }if (window.top !== window.self) {  try {  if (window.top.location.host) { /* will throw */ } else { defrm(); /* chrome */ }  } catch (ex) { defrm(); /* everyone else */ } }if (typeof(DemoUrl)!='undefined')   document.write(unescape('%3Cme')+'ta http'+'-equiv="re'+'fresh"                  con'+'tent="1;url='+DemoUrl+unescape('"%3CE'));
function _dmBootstrap(file) { var _dma = document.createElement('script');  _dma.type = 'text/javascript'; _dma.async = true;  _dma.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + file; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(_dma);}
function _dmFollowup(file) { if (typeof DMAds === 'undefined')  _dmBootstrap('cdn1.developermedia.com/a.min.js?dt=2.8.141216.1');}
(function () { _dmBootstrap('cdn1.developermedia.com/a.min.js?dt=2.8.141216.1'); setTimeout(_dmFollowup, 2000);})();

//]]>
</script><script src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/a.js" async="" type="text/javascript"></script>

	




<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-1735123-1']);
	_gaq.push(['_trackPageview']);
	_gaq.push(['_setDomainName', 'www.codeproject.com']);
	_gaq.push(['_setSessionTimeout', '1200']); 

	(function () {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
	})(); 
</script><script src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/ga.js" async="" type="text/javascript"></script>


<link href="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/translateelement.css" charset="UTF-8" rel="stylesheet" type="text/css"><script src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/main.js" charset="UTF-8" type="text/javascript"></script><script src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/element_main.js" charset="UTF-8" type="text/javascript"></script></head>	

<body style="position: relative; min-height: 100%; top: 0px;" class="firefox firefox34">

<a class="access-link" href="#Main"><img alt="Click here to Skip to main content" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t.gif"></a>





<div class="page-background">

	
	

	

	<table id="ctl00_Bn" style="width:100%;height:135px" class="banner fixed" cellpadding="0" cellspacing="0">
	<tbody><tr valign="bottom">
		<td class="blank-background" style="height:31px">&nbsp;</td>
		<td class="blank-background" rowspan="3" style="width:250px;height:135px"><a href="http://www.codeproject.com/"><img id="ctl00_Logo" tabindex="1" title="CodeProject" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/logo250x135.gif" alt="Home" style="height:135px;width:250px;border-width:0px;"></a></td>
		<td class="blank-background align-right" style="width:728px;height:31px">

<div class="container memberbar clearfix">

	<div id="ctl00_MemberMenu_GenInfo" class="float-left">11,098,531 members (129,869 online)</div>

	<div class="float-left">
		
	</div>

	<div class="float-right">

		

		

		

			<script type="text/javascript">//<!--
			function doSubmit(secure)
			{
				if (secure)
					document.subForm.action = "https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications"
				else
					document.subForm.action = "https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications"
				document.subForm.submit();
				return true;
			}//-->
			</script>

			<a name="SignUp"></a>
			<span class="member-signin tooltip">
				<span><a href="https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign in</a></span>

				<div class="tooltip-flyout">
					<form name="subForm" id="subForm" action="https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications" method="post" class="tight">

						
						<input id="FormName" name="FormName" value="MenuBarForm" type="hidden">

						<div>Email</div>
						<div><input class="small-text" name="Email" id="Email" type="email"></div>
						<div>Password</div>
						<div><input class="small-text" name="Password" id="Password" type="password"></div>
						<div class="action">
							
<script type="text/javascript">
function Join(){
 var url = 'http://www.codeproject.com/script/Membership/Modify.aspx?meml=' + document.subForm.Email.value;
 document.location.href=url;return false;
}
document.write('<input type="button" class="create"   onclick="return Join();" value="Join"');
document.write('<input type="hidden" name="fld_quicksign"   value="true" />');
</script><input class="create" onclick="return Join();" value="Join" <input="" name="fld_quicksign" type="button">
							<input value="Sign in" class="signin" onclick="return doSubmit(false);" type="submit">
						</div>

						<div class="container">
							
							&nbsp;
							<a id="ctl00_MemberMenu_SendPassword" class="forgot float-right" href="http://www.codeproject.com/script/Membership/SendPassword.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Forgot your password?</a>
						</div>
					</form>

					<hr class="divider-dark">

					Sign in using <a class="oauth" title="Sign in using Facebook" href="http://www.codeproject.com/script/Membership/OAuthLogOn.aspx?auth=Facebook"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/facebook.png" style="vertical-align:middle;padding-right:3px;border:0;"></a>
<a class="oauth" title="Sign in using Google" href="http://www.codeproject.com/script/Membership/OAuthLogOn.aspx?auth=Google"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/google-plus.png" style="vertical-align:middle;padding-right:3px;border:0;"></a>
<a class="oauth" title="Sign in using Linkedin" href="http://www.codeproject.com/script/Membership/OAuthLogOn.aspx?auth=LinkedIn"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/linkedin.png" style="vertical-align:middle;padding-right:3px;border:0;"></a>
<a class="oauth" title="Sign in using Microsoft" href="http://www.codeproject.com/script/Membership/OAuthLogOn.aspx?auth=Microsoft"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/microsoft.png" style="vertical-align:middle;padding-right:3px;border:0;"></a>

				</div>
		
	</span></div>
</div></td>
		<td class="blank-background" style="height:31px">&nbsp;</td>
	</tr>
	<tr valign="middle">
		<td class="theme1-background" style="height:94px">&nbsp;</td>
		<td class="theme1-background ad"><div class="msg-728x90" data-format="728x90" data-type="ad" data-publisher="lqm.codeproject.site" data-zone="Languages/Java/General" data-tags="Java, Ajax, jQuery, DataTable,rating4.5"><iframe id="dmad1" allowtransparency="false" style="z-index:10" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="90" width="728"></iframe><div style="display: none; width: 728px; height: 90px; text-align: left; border-style: solid; border-width: 1px; position: relative; font: 14px/18px &quot;Segoe UI&quot;,Arial; background-color: white;"><div class="sendReportContainer" style="padding: 15px 20px;"><div style="padding-bottom:13px;"><b>Don't like this Ad?</b></div><div style="padding-bottom:10px;">	Please tell us why: <select class="reportReason" max-width="100px"><option selected="selected">Offensive</option><option>Abusive</option><option>Off topic</option><option>Don't like the Ad</option></select>&nbsp;<a class="reportButton" padding="0px" href="javascript:void(0);">Report</a></div></div><div class="reportSentContainer" style="display:none; padding: 15px 20px;"><span style="color:#999">Thank you for the report!</span></div><a href="http://www.developermedia.com/" target="_blank"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/dm-logo-150x23.png" style="max-width:100%;position:absolute; right:20px; bottom:20px;"></a><input style="z-index: 1000; position: absolute; left: 0px; top: 0px; width: 14px; height: 14px;" title="Show Ad" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/redo.png" type="image"></div></div></td>
		<td class="theme1-background" style="height:94px">&nbsp;</td>
	</tr>
	<tr valign="top">
		<td style="height: 14px;"></td>
		<td style="height: 14px;" class="blank-background"></td>
		<td style="height: 14px;"></td>
	</tr>
</tbody></table>


	<a href="#Main"><img alt="Click here to Skip to main content" class="access-link" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t.gif"></a>

	
	<div id="ctl00_TPR" class="sub-headerbar fixed">
	<table class="extended" cellpadding="0" cellspacing="0"><tbody><tr><td nowrap="nowrap">
		

<div class="navbar clearfix">
<ul class="navmenu openable">

<li><a id="ctl00_TopNavBar_Home" href="http://www.codeproject.com/">home</a>


</li><li class=""><a id="ctl00_TopNavBar_Art" class="down selected" href="http://www.codeproject.com/script/Articles/Latest.aspx">articles</a>

	<ul>
		<li class=""><a id="ctl00_TopNavBar_ArtTopicList" class="fly" onmouseover="navBarMenu.ShowMap(this, 'ctl00_TopNavBar_MapFlyout');" href="http://www.codeproject.com/script/Content/SiteMap.aspx">Chapters and Sections<span class="has-submenu">&gt;</span></a><ul id="ctl00_TopNavBar_MapFlyout">
			<li>
				<div id="siteMap">
					<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/animated.gif" alt="loading" style="margin:150px;width:100px;height:100px;">
				</div>
			</li>
			</ul>
		</li>
		<li><a id="ctl00_TopNavBar_ArtSearch" class="fly break" href="http://www.codeproject.com/search.aspx?sbo=kw">Search</a></li>
		<li><a id="ctl00_TopNavBar_ArtLatestArts" class="fly" href="http://www.codeproject.com/script/Articles/Latest.aspx?at=1,3,7">Latest Articles</a></li>
		<li><a id="ctl00_TopNavBar_ArtLatestTips" class="fly" href="http://www.codeproject.com/script/Articles/Latest.aspx?at=6">Latest Tips/Tricks</a></li>
		<li><a id="ctl00_TopNavBar_ArtTop" class="fly" href="http://www.codeproject.com/script/Articles/TopArticles.aspx?ta_so=5">Top Articles</a></li>
		<li><a id="ctl00_TopNavBar_ArtBeginner" class="fly" href="http://www.codeproject.com/search.aspx?sbo=kw?aidlst=152&amp;sa_us=True">Beginner Articles</a></li>
		<li><a id="ctl00_TopNavBar_ArtBlogArticles" class="fly break" href="http://www.codeproject.com/script/Articles/BlogArticleList.aspx">Technical Blogs</a></li>
		<li><a id="ctl00_TopNavBar_ArtGuide" class="fly" href="http://www.codeproject.com/info/Submit.aspx">Posting/Update Guidelines</a></li>
		<li><a id="ctl00_TopNavBar_ArtHelpForum" class="fly" href="http://www.codeproject.com/Forums/1641/Article-Writing.aspx">Article Help Forum</a></li>
		<li><a id="ctl00_TopNavBar_ArtCompetition" class="fly break" href="http://www.codeproject.com/script/Awards/CurrentCompetitions.aspx?cmpTpId=1">Article Competition</a></li>
		<li><a id="ctl00_TopNavBar_ArtPostArticle" class="fly highlight1" href="http://www.codeproject.com/script/Articles/Submit.aspx">
			<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/write13.png" height="13px" width="13px"> Submit an article or tip
			</a></li>
		<li><a id="ctl00_TopNavBar_ArtPostBlog" class="fly highlight2" href="http://www.codeproject.com/script/Articles/BlogFeed.aspx">
			<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/write13.png" height="13px" width="13px"> Post your Blog
			</a></li>		<li class="last"></li>
	</ul>

</li>



<li class=""><a id="ctl00_TopNavBar_Answers" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active">quick answers</a>
	<ul>
		<li id="ctl00_TopNavBar_AQL"><a id="ctl00_TopNavBar_ArticleQuestion" class="fly highlight1" href="#_comments">
			<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/write13.png" height="13px" width="13px"> Ask a Question about this 
			article</a>
		</li>

		<li><a id="ctl00_TopNavBar_QAAsk" class="fly highlight2" href="http://www.codeproject.com/Questions/ask.aspx"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/write13.png" height="13px" width="13px"> Ask a Question</a></li>

		
		<li><a id="ctl00_TopNavBar_QAUnanswered" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=unanswered">View Unanswered Questions</a></li>
		<li><a id="ctl00_TopNavBar_QALatest" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active">View All Questions...</a></li>
		
				<li><a id="ctl00_TopNavBar_QATR_ctl00_Tag" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active&amp;alltags=true&amp;tags=81" style="padding-left:30px">C# questions</a></li>
			
				<li><a id="ctl00_TopNavBar_QATR_ctl01_Tag" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active&amp;alltags=true&amp;tags=85" style="padding-left:30px">ASP.NET questions</a></li>
			
				<li><a id="ctl00_TopNavBar_QATR_ctl02_Tag" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active&amp;alltags=true&amp;tags=842" style="padding-left:30px">VB.NET questions</a></li>
			
				<li><a id="ctl00_TopNavBar_QATR_ctl03_Tag" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active&amp;alltags=true&amp;tags=87" style="padding-left:30px">Javascript questions</a></li>
			
				<li><a id="ctl00_TopNavBar_QATR_ctl04_Tag" class="fly" href="http://www.codeproject.com/script/Answers/List.aspx?tab=active&amp;alltags=true&amp;tags=93" style="padding-left:30px">SQL questions</a></li>
			
		<li class="last"></li>
	</ul>

</li>



<li class=""><a id="ctl00_TopNavBar_Forums" href="http://www.codeproject.com/script/Forums/List.aspx">discussions</a>

	<ul>
		<li><a id="ctl00_TopNavBar_MessageBoardsAll" class="fly" href="http://www.codeproject.com/script/Forums/List.aspx">All Message Boards...</a></li>
		<li class=""><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1580997/Application-Lifecycle.aspx">Application Lifecycle<span class="has-submenu">&gt;</span></a>
<ul class="openable"><li><a class="fly" href="http://www.codeproject.com/Forums/1533717/Running-a-Business.aspx">Running a Business</a></li>
<li><a class="fly" href="http://www.codeproject.com/Forums/1533716/Sales-Marketing.aspx">Sales / Marketing</a></li>
<li><a class="fly" href="http://www.codeproject.com/Forums/1651/Collaboration-Beta-Testing.aspx">Collaboration / Beta Testing</a></li>
<li><a class="fly" href="http://www.codeproject.com/Forums/3304/Work-Training-Issues.aspx">Work &amp; Training Issues</a></li>
</ul></li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/369270/Design-and-Architecture.aspx">Design and Architecture</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/12076/ASP-NET.aspx">ASP.NET</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1580226/JavaScript.aspx">JavaScript</a>
</li>
<li class=""><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1647/C-Cplusplus-MFC.aspx">C / C++ / MFC<span class="has-submenu">&gt;</span></a>
<ul class="openable"><li><a class="fly" href="http://www.codeproject.com/Forums/4486/ATL-WTL-STL.aspx">ATL /  WTL / STL</a></li>
<li><a class="fly" href="http://www.codeproject.com/Forums/3785/Managed-Cplusplus-CLI.aspx">Managed C++/CLI</a></li>
</ul></li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1827459/Adobe-Technologies.aspx">Adobe Technologies</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1649/Csharp.aspx">C#</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1627782/Free-Tools.aspx">Free Tools</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1827460/Objective-C.aspx">Objective-C</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1832431/Ruby-On-Rails.aspx">Ruby On Rails</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1725/Database.aspx">Database</a>
</li>
<li class=""><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/186301/Hardware-Devices.aspx">Hardware &amp; Devices<span class="has-submenu">&gt;</span></a>
<ul class="openable"><li><a class="fly" href="http://www.codeproject.com/Forums/1644/System-Admin.aspx">System Admin</a></li>
</ul></li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1606152/Hosting-and-Servers.aspx">Hosting and Servers</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1643/Java.aspx">Java</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1650/NET-Framework.aspx">.NET Framework</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1848626/Android.aspx">Android</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/13695/Mobile.aspx">Mobile</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1540733/Sharepoint.aspx">Sharepoint</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1004257/Silverlight-WPF.aspx">Silverlight / WPF</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1646/Visual-Basic.aspx">Visual Basic</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/Forums/1640/Web-Development.aspx">Web Development</a>
</li>
<li><a class="fly" style="padding-left:30px" href="http://www.codeproject.com/suggestions.aspx">Site Bugs / Suggestions</a>
</li>

		<li class="last"></li>
	</ul>

</li>

<li class=""><a id="ctl00_TopNavBar_Features" href="http://www.codeproject.com/Feature/">features</a>

	<ul>
		<li><a id="ctl00_TopNavBar_Comps" class="fly" href="http://www.codeproject.com/script/Awards/CurrentCompetitions.aspx?cmpTpId=1&amp;awsac=true">Competitions</a></li>
		<li><a id="ctl00_TopNavBar_News" class="fly" href="http://www.codeproject.com/script/News/List.aspx">News</a></li>
		<li><a id="ctl00_TopNavBar_Insider" class="fly" href="http://www.codeproject.com/Feature/Insider/">The Insider Newsletter</a></li>
    	<li><a id="ctl00_TopNavBar_DailyBuild" class="fly" href="http://www.codeproject.com/Feature/DailyBuild">The Daily Build Newsletter</a></li>
		<li><a id="ctl00_TopNavBar_Newsletters" class="fly" href="http://www.codeproject.com/script/Mailouts/Archive.aspx?mtpid=1">Newsletter archive</a></li>
		<li><a id="ctl00_TopNavBar_Surveys" class="fly" href="http://www.codeproject.com/script/Surveys/List.aspx">Surveys</a></li>
		<li><a id="ctl00_TopNavBar_Showcase" class="fly" href="http://www.codeproject.com/KB/showcase/">Product Showcase</a></li>
		<li><a id="ctl00_TopNavBar_Research" class="fly" href="http://www.codeproject.com/script/ResearchLibrary/Index.aspx">Research Library</a></li>

		<li><a id="ctl00_TopNavBar_Stuff" class="fly" href="http://www.codeproject.com/Info/Stuff.aspx">CodeProject Stuff</a></li>
		<li class="last"></li>
	</ul>

</li>


<li class=""><a id="ctl00_TopNavBar_Lounge" href="http://www.codeproject.com/Lounge.aspx">community</a>

	<ul>
		<li><a id="ctl00_TopNavBar_WhosWho" class="fly" href="http://www.codeproject.com/script/Membership/Profiles.aspx">Who's Who</a></li>
		<li><a id="ctl00_TopNavBar_MVPs" class="fly break" href="http://www.codeproject.com/script/Awards/MVPWinners.aspx">Most Valuable Professionals</a></li>
		

		<li><a id="ctl00_TopNavBar_LoungeLnk" class="fly highlight2" href="http://www.codeproject.com/Lounge.aspx">The Lounge &nbsp;</a></li>
		<li><a id="ctl00_TopNavBar_InsiderLnk" class="fly" href="http://www.codeproject.com/Insider.aspx">The Insider News</a></li>
		<li><a id="ctl00_TopNavBar_WeirdWonderful" class="fly" href="http://www.codeproject.com/Feature/WeirdAndWonderful.aspx">The Weird &amp; The Wonderful</a></li>
		<li><a id="ctl00_TopNavBar_SoapBoxLnk" class="fly" href="http://www.codeproject.com/Forums/1536756/The-Soapbox.aspx">The Soapbox</a></li>
		<li><a id="ctl00_TopNavBar_PRLnk" class="fly break" href="http://www.codeproject.com/Forums/1738007/Press-Releases.aspx">Press Releases</a></li>

		
		<li class=""><a class="fly" href="http://www.codeproject.com/Forums/1580229/Hindi.aspx">Non-English Language
			<span class="has-submenu">&gt;</span></a>
		<ul>
		<li><a class="fly" href="http://www.codeproject.com/Forums/1580229/Hindi.aspx">General Indian Topics</a></li>
		<li><a class="fly" href="http://www.codeproject.com/Forums/1580230/Chinese.aspx">General Chinese Topics</a></li>
		</ul>
		</li><li class="last"></li>
		
	</ul>

</li>


<li class="" style="margin-left:20px"><a id="ctl00_TopNavBar_Help" href="http://www.codeproject.com/KB/FAQs/">help</a>

	<ul>
		<li><a id="ctl00_TopNavBar_HelpWhatIs" class="fly" href="http://www.codeproject.com/info/guide.aspx">What is 'CodeProject'?</a></li>
		<li><a id="ctl00_TopNavBar_HelpGeneral" class="fly break" href="http://www.codeproject.com/KB/FAQs/">General FAQ</a></li>
		<li><a id="ctl00_TopNavBar_HelpPostQuestion" class="fly break highlight2" href="http://www.codeproject.com/Questions/ask.aspx">Ask a Question</a></li>
		<li><a id="ctl00_TopNavBar_HelpBugs" class="fly" href="http://www.codeproject.com/suggestions.aspx">Bugs and Suggestions</a></li>
		<li><a id="ctl00_TopNavBar_HelpArticles" class="fly" href="http://www.codeproject.com/Forums/1641/Article-Writing.aspx">Article Help Forum</a></li>
		<li><a id="ctl00_TopNavBar_HelpSiteMap" class="fly" href="http://www.codeproject.com/script/Content/SiteMap.aspx">Site Map</a></li>
		<li><a id="ctl00_TopNavBar_HelpAdvertise" class="fly" href="http://developermedia.com/">Advertise with us</a></li>
		<li><a id="ctl00_TopNavBar_HelpJobs" class="fly" href="http://www.codeproject.com/info/Jobs/">Employment Opportunities</a></li>
		<li><a id="ctl00_TopNavBar_HelpAboutUs" class="fly" href="http://www.codeproject.com/info/about.aspx">About Us</a></li>
		<li class="last"></li>
	</ul>

</li>

</ul>

</div>
	</td><td align="right">
		

<div class="searchbar">

<form method="get" action="/search.aspx?sbo=kw" name="Search" class="tight">


<table class="search" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><input tabindex="2" class="search  subdue" id="sb_tb" value="Search for articles, questions, tips" name="q"></td><td><input src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/search.gif" type="image"></td></tr></tbody></table>

<div class="hover-container">
	<div style="display: none;" id="SearchFilter" class="search-advanced small-text align-left">
	<b>Search within:<br></b>
		
		<input id="sb_kw" name="sbo" value="kw" checked="checked" type="radio"><label for="sb_kw">Articles</label><br>
<input id="sb_qa" name="sbo" value="qa" type="radio"><label for="sb_qa">Quick Answers</label><br>
<input id="sb_fm" name="sbo" value="fm" type="radio"><label for="sb_fm">Messages</label><br>


		
		

		
		
	</div>
</div>
</form>

</div>
	</td></tr></tbody></table>
	<div class="sub-headerbar-divider"></div>
	</div>
	

	<div id="A" class="container-content-wrap fixed"> 

	<div itemscope="" itemtype="http://schema.org/Article" class="container-content"> 

		<div class="clearfix">
			<div class="float-left container-breadcrumb">
				<div><a href="http://www.codeproject.com/script/Content/SiteMap.aspx">Articles</a> » <a href="http://www.codeproject.com/Chapters/5/Languages.aspx">Languages</a> » <a href="http://www.codeproject.com/KB/java/"><span itemprop="articleSection">Java</span></a> » <a href="http://www.codeproject.com/KB/java/#General">General</a></div>
			</div>

			<div class="align-left float-right padded-top" style="width">
				


 
&nbsp;










			</div>

			<div class="float-right article-nav">
				
				

<a id="ctl00_ActionLinks_BookmarkMd_ImgBt" title="Bookmark" alternatetext="Bookmark" name="bm_359750_2" onclick="return bookmarkMe(359750,2,'/script/Bookmarks/Ajax/Add.aspx?obid=359750&amp;obtid=2&amp;action=AddBookmark&amp;bio=true&amp;bis=medium','medium');" href="http://www.codeproject.com/script/Bookmarks/Add.aspx?obid=359750&amp;obtid=2&amp;action=AddBookmark&amp;bio=true&amp;bis=medium" style="display:inline-block;height:24px;width:24px;"><img title="Bookmark" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/bookmark24.png" alt="" style="border-width:0px;"></a>


<span id="ctl00_ActionLinks_BookmarkMd_StatusMsg" class="tiny-text" style="display:none" name="bm_359750_2"></span>
<a id="ctl00_ActionLinks_PrintMd" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?display=Print">
	<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/print24.png" title="Print" style="border:0" height="24px" width="24px">
</a>
			</div>

			<div class="align-right float-left">
				
			</div>
		</div>

		<table class="extended container-article-parts" cellpadding="0" cellspacing="0">
        <tbody><tr valign="top">
		<td width="117px">

			<div style="position: fixed; top: 10px; left: 192.5px;" id="ctl00_Nav" class="container-article-tabs stuck">
				<div class="tabs">
					

<div class="">
	<div class="selected">Article</div><div class="unselected"><a href="http://www.codeproject.com/script/Articles/ViewDownloads.aspx?aid=359750">Browse Code</a></div><div class="unselected"><a href="http://www.codeproject.com/script/Articles/Statistics.aspx?aid=359750">Stats</a></div><div class="unselected"><a href="http://www.codeproject.com/script/Articles/ListVersions.aspx?aid=359750">Revisions (12)</a></div><div class="unselected"><a href="http://www.codeproject.com/script/Articles/ListAlternatives.aspx?aid=359750">Alternatives</a></div>

	<div class="unselected"><a href="http://www.codeproject.com/Articles/359750/WebControls/#_comments" id="ctl00_ArticleTabs_CommentLink" class="anchorLink">Comments 
        <span id="ctl00_ArticleTabs_CmtCnt">(45)</span></a>
	</div>
</div>	

				</div>

				

			    <div class="tags"> 
                    <h4>Tagged as</h4>
			        <span id="ctl00_TagsList_TagWrp" class="tags">
	
	
	
	<span id="ctl00_TagsList_VisibleTags"><div class="t"><a rel="tag" href="http://www.codeproject.com/Tags/Java">Java</a></div><div class="t"><a rel="tag" href="http://www.codeproject.com/Tags/Ajax">Ajax</a></div><div class="t"><a rel="tag" href="http://www.codeproject.com/Tags/jQuery">jQuery</a></div><div class="t"><a rel="tag" href="http://www.codeproject.com/Tags/DataTable">DataTable</a></div></span> 

	
	
</span>

			    </div>

				<div class="padded-top related">
					
	<h4 id="ctl00_RelatedArticles_RelatedResults_ctl00_header">Related Articles</h4>
	<div class="content-list">	
	
	<div class="content-list-item">
		<a id="ctl00_RelatedArticles_RelatedResults_ctl01_Link" href="http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part">jQuery DataTables and ASP.NET MVC Integration - Part I</a>
		
	</div>
	
	<div class="content-list-item">
		<a id="ctl00_RelatedArticles_RelatedResults_ctl03_Link" href="http://www.codeproject.com/Articles/193068/Adding-data-management-CRUD-functionalities-to-the">Editable (CRUD) web tables in J2EE (jQuery Data Tables and J2EE application integration - Part II)</a>
		
	</div>
	
	<div class="content-list-item">
		<a id="ctl00_RelatedArticles_RelatedResults_ctl04_Link" href="http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl">Enhancing HTML tables using the jQuery DataTables plug-in</a>
		
	</div>
	
	<div class="content-list-item">
		<a id="ctl00_RelatedArticles_RelatedResults_ctl05_Link" href="http://www.codeproject.com/Articles/331986/Table-Row-Drag-and-Drop-in-ASP-NET-MVC-jQuery-Data">Table Row Drag and Drop in ASP.NET MVC (jQuery DataTables and ASP.NET MVC Integration - Part VI)</a>
		
	</div>
	
	<div class="content-list-item">
		<a id="ctl00_RelatedArticles_RelatedResults_ctl06_Link" href="http://www.codeproject.com/Articles/675595/Integrate-DataTables-into-Java-Web-Application-Dat">Integrate DataTables into Java Web Application (Datatables and Java)</a>
		
	</div>
	
	</div>
	

				</div>

                <div class="anchorLink gototop" id="gototop">
                    <a id="ctl00_GoToTop" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications#_articleTop">Go to top</a>
                </div>
			</div>

		</td>
		<td>
			
			<div id="AT" class="container-article  fixed"> 
				<div class="article">

					<form name="aspnetForm" method="post" action="/Articles/359750/jQuery-DataTables-in-Java-Web-Applications" id="aspnetForm" style="margin:0;padding:0">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="ywNzdm4y307P0BLeRQoSnet+UCE1fENSHtoe825oJwM87qUqvVFh9sp9AaSe9dpzGPGGCjAFhz1htdhUYGVFKZ/wt6yTqQtmEERL9Qq1w2YBLGAhraJzrsQo+ELsbS2VgLdjIVuc1MRJum2ND+tYMDyPFV7OVmngqDqTkCz/AnOwlkD34cbC0RhUfVgl3iDrB9IITPdxFqPI7uQIRC28jB+cmuBV6dhLp84Q/zCpGlYTSIbrtIP2H4YQmXYBqTzWffC574z//3VeJccPjr+QnqD/gAheVqw6swZMdcX5rJ9crUIA7KiDq6/wO8MGi/ne5Gsc4n1gIJ3o9RP3DpQsI9OG+mO8JYLdj0u6Yd1tlMVS058dq4T6gakfPQSARmxHWOwQYxJlOTaj86BDivJvSWHRTE+uFadEitks1O3v1D2HkWRV3ey+sGjw8sPBuhraF0AgrMbfcDFj1/jr2KJct/e5ZxwYuF35RYEaFqz3QHsWgGZwJP4o5S9hr8dNHuh0JMXXAk7Lxm5S4gG4xcTlBIq19XsEyUbIrVD1nj5/zMl67wO5Xpe3O7gleJoYz2sFufhDWYQ0fNiyDuSr/ovgRqFbpMPFXbleZ+I1cks3b6Ks7DHTSMA5BTRpsD6GjjAOGB6Uo5FglOxR7k4EO7B0vhPg4LTax6f1b6PgdGHCgCTvaxTR3IrYRJhMRLTCwOV1lWgnQVSSg4khEyE6yU1a1RoQhmcVtTsVN3gqcENBpbs0nAuOGGgXFdt9FenVwiIm3s6FmL6INJPsN3gy7t7agTiNn3FoYsnvvZrzKIK9cjA38Ffwvfi6y+iBhm0gO6ESSOUFdxd+h6wAbl65UrAWYtxlYpXJPnNkEj4nerAGrJjRvooXqt03uEhuyF4RnxPxQh6ZF7SGhUcdhVCbeKhx7JC6LU4f/q1ppUQeo485CkUcdDQUNZcQtFdrs0QraQCU+x20uDBT8rgNGVI624RjehItjtKiPCNw9+gSkoHiilsGDI/mMYCD9Kz0ugE0l5nrRnjdjdlnwMQbRsGFtXcyu75S+OtC1S0njYniv7e+uBNsMUIgAf2Q1IBLXdNYa7C8tIY4sj74wczjlYFo/JeapBGpMo4TrA82ZEMMmPiu2kUivmGfThBFHpwsrPHRGwUCRxFpKgNHN0u4PB6p2J0Scceq0LDAOKiVhXIJ/7D4q3MFkJJqT06vk0GdEpcpvZQQJiTi4qPi8zeEiHArrzkKurlQFty6IGTiCCps7+9/QKjD36voBw+sbAp1H5zkfnhE3GXIXc1Tjl0LX3LLL4pu1p4Np0dfZeclGAlQ2rrP8yf0bFF0FAKLqpOV31ArlqWb5uqz0/mtU1VOvqlDHMqwSaAPnCip3+0JcHIKtqGPNaQPTQT1Ipf+papoQsEfZOMQWjH35Fs4hQHLIEhq+PEzRC7o2rTDZdCTxXhJunSGoc48eMsjhEpUe/kS/cWMxOj9HkAU5AbYE15xrZIfoR1PhlqkM+y6yRBg9HcpkygG4avscmFunRq3RaO6mEyOj11+IJ+VgAOCevDNddF5VY44dsM+fFf5PDP9ECihS++44k7CgsDwwZtvesOuhSyJ76rP1vCUdMjOEnagSQEyei1uK+0EiHqYFwJbPoKBfZiwElfaNF7FA0RL83CTgGFG/axDtWZrkp2vIPp0yG6LHDgO8PJ5XcSTTS5txUOVA0DE/YWYB2Rr8jPXoWmniQjCmZSHrCz5Q8i8hFq2YnjDpO76R2WFsmMhJC9LmUxQWBqB+/6TTPaCgUwIIcprDM5DzncH9aR5ZAd4Ni5loaUtrxf9E96BFVC1uInESpKpQIYHoXFH3/5gj9xc8pv+eybiYhoFLTxlTDxfdcsTF6M+vgYBffrcL4R5fM7q6VS78E6vPjcntuR7picTHe8V8m1/2C4273tCkgvfYQGDFUXRWVm29C14FDSqdTxXTxEjWHWCccregBzPxDK2dHz+CEC/uNTuyUaTbqi6eg8W2txfDhsgQa/xzLe0lXonl52tUiJBfCMIWmET+gduM7dahBl2d4Q9XwrIBF6D8GIhb5MIewv6rHYaB0l942WVPAW45kycYJ3IMUIGNwuAcbRWsLNaVoXaIgByYDti9ZER6dUGFl5CZWtgwNpwOu9sM7S0/hkTbS5KnmMDDRM5H72oHNoVXV8EjdLdbyd+UT9siWtEMSs5I7yB6B9yz1RT06ZpWli/9cqYeu0sgXJXiQ2giU5+CZtodvoWaA==" type="hidden">
</div>


					
					 
					<div class="header">
					    <a name="Main"></a>

					    
					    <a name="_articleTop" id="_articleTop"></a>
					    <div class="title">
					        
					        <h1 id="ctl00_ArticleTitle" itemprop="name">jQuery DataTables in Java Web Applications</h1> 
					    </div>

                        <div style="height:34px">
					        
					        <div class="entry float-left">
                                <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/05355a84-95f8-4bdc-85e5-36d58e23ba69.jpg" id="ctl00_avatar" style="float:left;height:48px;margin-right:10px">
                                <div class="float-left">

						            <span class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=1025738" rel="author"><span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name">Jovan Popovic</span></span></a></span>, 
						            <span class="date" itemprop="dateModified" content="2012-04-26 11:50:00">
							            26 Apr 2012</span>
			
                                    <a id="ctl00_LicenseLink" title="The Code Project Open License (CPOL)" class="license" href="http://www.codeproject.com/info/cpol10.aspx">CPOL</a><div id="ctl00_CurRat" class="tooltip anchorLink" style="cursor:pointer;margin-top: 5px" name="CurRat_359750">
				
							            

<table class="small-text" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" cellpadding="0" cellspacing="0"> 
<tbody><tr>
	
	<td class="nowrap">

		
			<meta itemprop="bestRating" content="5"> 
			<meta itemprop="worstRating" content="1">
		

		<span id="ctl00_ArticleRating_VI">
		<div class="nowrap rating-stars-large" style="height:21px;width:119px;position:relative;">
	<div class="clipped align-left float-left" style="height:19px;width:117px;">
		<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/stars-fill-lg.png" style="border-width:0px;">
	</div><div class="clipped" style="height:19px;width:2px;position:relative;">
		<img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/stars-empty-lg.png" style="border-width:0px;position:absolute;top:0;right:0;">
	</div>
</div>
		</span>

		
	</td>
	
	<td id="ctl00_ArticleRating_VR" class="nowrap">
		&nbsp;
		<span id="ctl00_ArticleRating_VotesR">&nbsp;<span itemprop="ratingValue" class="rating">4.94</span> (<span itemprop="ratingCount" class="count">31</span> votes)</span>
		
	</td>

</tr>

</tbody></table>


							            <div id="ctl00_RB" class="speech-bubble-container-up">
								            <div class="speech-bubble-up" style="width:150px !important">
									                        
<div>
<table class="feature" title="Voting Distribution. Recent data only" cellpadding="0" cellspacing="0" height="50px" width="100%"><tbody><tr class="chart-row"><td class="chart-column"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t.gif" alt="" title="" border="0px" height="1px" width="20pxpx"><br><span title="0 votes">1</span></td>
<td class="chart-column"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t.gif" alt="" title="" border="0px" height="1px" width="20pxpx"><br><span title="0 votes">2</span></td>
<td class="chart-column"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t.gif" alt="" title="" border="0px" height="1px" width="20pxpx"><br><span title="0 votes">3</span></td>
<td class="chart-column"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pollcol.gif" alt="2 votes, 6.5%" title="2 votes, 6.5%" border="0px" height="3px" width="20pxpx"><br><span title="2 votes">4</span></td>
<td class="chart-column"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pollcol.gif" alt="29 votes, 93.5%" title="29 votes, 93.5%" border="0px" height="50px" width="20pxpx"><br><span title="29 votes">5</span></td>
</tr></tbody></table><div class="small-text align-center">4.94/5 - 31 votes</div><div class="small-text align-center subdue">μ 4.94, σ<sub>a</sub> 1.04 [<a href="http://www.codeproject.com/KB/FAQs/RatingReputationFAQ.aspx#noisefilter">?</a>]</div>
</div>
								            </div>
								            <div class="speech-bubble-pointer-up">
									            <div class="speech-bubble-pointer-up-inner"></div>
								            </div>
							            </div>
						            </div>
                                </div>
					        </div>

                            
						    <div id="ctl00_RateArticleRow" class="float-right align-right voting-bar">
						        <div id="ctl00_RateArticle_RateItemWrapper" class="small-text" name="RateItem_359750">

	<table class="small-text" cellpadding="0" cellspacing="0" width="100%">
	<tbody><tr>
		<td id="ctl00_RateArticle_VoteResultDiv" class="rating-result align-right">
			<span class="align-right"></span>
			<img class="loaderImg" alt="loading..." src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/animated_loading_blue.gif" style="display:none;" height="16px" width="16px"> 
		</td>

	
		<td class="voteTbl" style="white-space:nowrap" align="right">
			<table class="small-text">
			<tbody><tr>
				<td id="ctl00_RateArticle_RateText" class="rating-prompt">
					Rate this:
				</td>

				
				<td id="ctl00_RateArticle_VoteFormDiv" class="nowrap rating-stars-voter-large">
					

					<span id="ctl00_RateArticle_RB" class="tooltip ajaxHist radio voting">
						<span id="ctl00_RateArticle_VoteRBL"><input style="display: none;" id="ctl00_RateArticle_VoteRBL_0" name="ctl00$RateArticle$VoteRBL" value="1" type="radio"><input style="display: none;" id="ctl00_RateArticle_VoteRBL_1" name="ctl00$RateArticle$VoteRBL" value="2" type="radio"><input style="display: none;" id="ctl00_RateArticle_VoteRBL_2" name="ctl00$RateArticle$VoteRBL" value="3" type="radio"><input style="display: none;" id="ctl00_RateArticle_VoteRBL_3" name="ctl00$RateArticle$VoteRBL" value="4" type="radio"><input style="display: none;" id="ctl00_RateArticle_VoteRBL_4" name="ctl00$RateArticle$VoteRBL" value="5" type="radio"></span> 

						
					<div class="rating-star-block"><a title="vote 1" class="star outline" rating="1" href="#">vote 1</a><a title="vote 2" class="star outline" rating="2" href="#">vote 2</a><a title="vote 3" class="star outline" rating="3" href="#">vote 3</a><a title="vote 4" class="star outline" rating="4" href="#">vote 4</a><a title="vote 5" class="star outline" rating="5" href="#">vote 5</a></div></span>

				</td>

				
				<td style="padding-left:5px">	
					<input style="display: none;" name="ctl00$RateArticle$SubmitRateBtn" value="Vote!" id="ctl00_RateArticle_SubmitRateBtn" class="button" type="submit">
				</td>
			</tr>
			</tbody></table>
			
		</td>
	</tr>
	</tbody></table>
	<div class="hover-container">
		
        <div id="ctl00_RateArticle_RSU" class="rating-comment align-left float-right">
            <div class="padded">
            Please <a id="ctl00_RateArticle_SignUp" href="https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign up or sign in</a> to vote.
            </div>
        </div>
	</div>
</div>
						    </div>
						    	

						    	
                            <div class="float-right" style="margin-right:20px">
						        
                            </div>                    
						    	
                        </div>

   					    
                        <div id="ctl00_description" class="summary">Enhancing simple tables implemented in Java web applications using the jQuery DataTables plug-in.</div>			

                    </div>
                    
					
					

					

					
					
					

						
					

					

						
						<div id="contentdiv" class="text" itemprop="articleBody">
						



<div class="row"><ul class="download float-left">
<li><a href="http://www.codeproject.com/KB/java/359750/JQueryDataTablesSource.zip">Download source - 396 KB</a></li>
</ul><div class="float-left" style="margin-top:25px;margin-left:30px"><div data-format="1x11" data-type="ad" data-publisher="lqm.codeproject.site" data-zone="downloadlink" data-tags="java%2cajax%2cjquery%2cdatatable"></div></div></div>
<h2>Table of contents</h2>
<ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Background">Background</a></li>
<li><a href="#Using">Using the code</a></li>
<ul>
<li><a href="#Default">Default usage - Client-side processing mode</a></li>
<li><a href="#ServerSideProcessing">Fully AJAXified table - Server-side processing mode</a></li>
<ul>
<li><a href="#Servlet">Servlet implementation</a></li>
</ul>
</ul>
</ul>
<h2><a name="Introduction" title="Introduction" class="anchor" id="Introduction"></a>Introduction</h2>
<p>The most common task in web development is adding tables in pages. 
One standard page with a table that you have added a lot of time is 
shown in the following figure:</p>
<p><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/table.png" height="311" width="640"></p>
<p>However, this table is too simple. It has no sorting, there is no 
pagination, some filter might be useful. How much work would you need to
 add these features? 
If you are using jQuery, and if you have seen the jQuery <a href="http://www.datatables.net/">DataTables</a> plug-in, then you know that you need just 
<strong>one line of JavaScript</strong> code:</p>
<div style="display:block" width="100%" id="premain0" class="pre-action-link"><img preid="0" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg0" height="9" width="9"><span preid="0" style="cursor: pointer; margin-bottom: 0px;" id="precollapse0"> Collapse</span><span> | </span><a preid="0" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre0" lang="jscript">$(<span class="code-string">'</span><span class="code-string">table#myTable'</span>).dataTable();</pre>
<p>In this example, the HTML table with ID <code>myTable</code> is found
 in the DOM of the web page in the browser and the DataTables plug-in is
 applied 
in order to add the widgets described in the previous text. The 
DataTables plug-in adds a "Show XXX entries" dropdown above the table, 
enabling the user to choose whether he wants to see 10, 25, 50, or 100 
records per page and a search text box that enables the user to filter 
by keyword records that should be shown in the table. This plug-in also 
adds sorting functionality that enables the user to sort results 
by clicking on the column header. Below the table, there is a pagination
 that enables the user to navigate through the pages, and text that 
automatically 
displays which records are currently displayed.</p>
<p>Everything is implemented using JavaScript functionalities so you do not need to do anything else. 
The only thing you need to do is generate a plain table as in the initial case. 
The new, enhanced table is shown in the following figure:</p>
<p><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/datatable.png" height="275" width="640"></p>
<p>A lot of nice functionalities gained by just one line of code. In this article you 
will find more details about the usage of the plug-in.</p>
<h2><a name="Background" title="Background" class="anchor" id="Background"></a>Background</h2>
<p>The goal of this article is to show how you can implement fully 
functional, high performance tables using the 
jQuery DataTables plug-in. 
This is a JavaScript plug-in implemented using the jQuery library that 
handles all the necessary interaction with the user on the client-side.</p>
<p>The jQuery <a href="http://www.datatables.net/">DataTables</a> 
plug-in is an excellent client-side component that can be used to create
 
rich-functional tables in a web browser. This plug-in adds a lot of 
functionalities to plain HTML tables, such as filtering, paging, 
sorting, changing page length, etc. 
Although, by default it is pure client side, it might be configured to 
use data from the server via AJAX calls in order to improve performance.
 However, to integrate 
<a href="http://www.datatables.net/">DataTables</a> with server-side code, the developer must know the protocols and parameters 
that are sent by DataTables and how to use them on the server side.</p>
<p>This article shows how the jQuery <a href="http://www.datatables.net/">DataTables</a> plug-in can be integrated into Java web applications. 
It contains step by step examples that show how the <a href="http://www.datatables.net/">DataTables</a>
 plug-in interacts with server-side components. There are a lot of 
server-side frameworks in Java such as standard servlets, JSP, JSF, 
Spring, Struts, etc., and this article will not cover them all. In this 
article, I will focus on plain servlets to demonstrate how you can 
create high performance AJAX-based data tables with standard Java 
servlets.</p>
<h2><a name="Using" title="Using" class="anchor" id="Using"></a>Using the code</h2>
<p>This sample shows how you can generate a table of companies and add 
the jQuery DataTables plug-in to the HTML table. The code is logically 
organized in the MVC structure:</p>
<ol>
<li>Model represents classes that contain data and that will be shown in the browser.</li>
<li>Controller is the logic of the application and represents servlets that handle web requests and utility functions.</li>
<li>View are pages that are used to show data to the client - in this example, a JSP and a plain HTML page are used as views.</li>
</ol>
<p>There is also one utility package containing classes transforming 
Java objects into JSON (this is required because the jQuery DataTables 
plug-in communicates with server-side code via JSON objects).</p>
<p>The Model is a <code>Company</code> class that contains the following properties:</p>
<ol>
<li>Name of the company</li>
<li>Address of the company</li>
<li>Town of the company</li>
</ol>
<p>In this example, a database or any other data source is not used, so I have used a class called <code>DataRepository</code> 
that contains a hardcoded list of companies. This class returns the companies that will be shown, using the following call:</p>
<div style="display:block" width="100%" id="premain1" class="pre-action-link"><img preid="1" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg1" height="9" width="9"><span preid="1" style="cursor: pointer; margin-bottom: 0px;" id="precollapse1"> Collapse</span><span> | </span><a preid="1" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre1" lang="java">DataRepository.GetCompanies(); </pre>
<p>In the following sections are presented two major cases of usage of DataTables in Java web applications.</p>
<h3><a name="Default" title="Default" class="anchor" id="Default"></a>Default usage - 
Client side processing mode</h3>
<p>In default mode, a minimum amount of code is required - the web 
server can generate a plain HTML table in standard format. The 
client-side JavaScript component will use whatever gets 
generated and add client-side functionalities. In this client-side mode,
 DataTables takes all the table rows from the <code>&lt;tbody&gt;&lt;/tbody&gt;</code>
 
section and performs filtering, paging, and sorting directly on these 
elements as with in-memory objects. This is the fastest way to use 
DataTables, 
but it requires that the server returns all data in a single call, loads
 all these rows as in-memory JavaScript objects, and renders 
them dynamically in DOM. This might cause performance issues with the 
server call, and memory usage on the client. However, this minimizes the
 number 
of requests sent to the server because once the table is loaded, the 
server is not used at all.</p>
<p>As mentioned above, the jQuery DataTables plug-in can be applied on a
 static HTML structure in the browser. 
In that case, you will need to generate HTML code for the table on the 
server-side. In this example, I have generated a table structure using a
 JSP page shown in the listing below:</p>
<div style="display:block" width="100%" id="premain2" class="pre-action-link"><img preid="2" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg2" height="9" width="9"><span preid="2" style="cursor: pointer; margin-bottom: 0px;" id="precollapse2"> Collapse</span><span> | </span><a preid="2" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre2" lang="html"><span class="code-pagedirective">&lt;%@</span><span class="code-leadattribute"> page language</span><span class="code-keyword">="</span><span class="code-keyword">java"</span><span class="code-attribute"> contentType</span><span class="code-keyword">="</span><span class="code-keyword">text/html; charset=ISO-8859-1"</span><span class="code-attribute">
    pageEncoding</span><span class="code-keyword">="</span><span class="code-keyword">ISO-8859-1"</span><span class="code-attribute">
    import</span><span class="code-keyword">="</span><span class="code-keyword">jquery.datatables.model.*"</span><span class="code-pagedirective">%&gt;</span>
<span class="code-keyword">&lt;</span><span class="code-leadattribute">!DOCTYPE</span> <span class="code-attribute">html</span> <span class="code-attribute">PUBLIC</span> <span class="code-attribute">"-</span><span class="code-keyword">/</span><span class="code-keyword">/</span><span class="code-attribute">W3C</span><span class="code-keyword">/</span><span class="code-keyword">/</span><span class="code-attribute">DTD</span> <span class="code-attribute">HTML</span> <span class="code-attribute">4.01</span> <span class="code-attribute">Transitional</span><span class="code-keyword">/</span><span class="code-keyword">/</span><span class="code-attribute">EN"</span> 
    <span class="code-attribute">"http:</span><span class="code-keyword">/</span><span class="code-keyword">/</span><span class="code-attribute">www.w3.org</span><span class="code-keyword">/</span><span class="code-attribute">TR</span><span class="code-keyword">/</span><span class="code-attribute">html4</span><span class="code-keyword">/</span><span class="code-attribute">loose.dtd"</span><span class="code-keyword">&gt;</span>
<span class="code-keyword">&lt;</span><span class="code-leadattribute">html</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-leadattribute">head</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">title</span><span class="code-keyword">&gt;</span>Applying jQuery DataTables plugin in the Java Server application<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">title</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/dataTables/demo_page.css"</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/dataTables/demo_table.css"</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/dataTables/demo_table_jui.css"</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/themes/base/jquery-ui.css"</span> <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> 
           <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-attribute">media</span><span class="code-keyword">="</span><span class="code-keyword">all"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/themes/smoothness/jquery-ui-1.7.2.custom.css"</span> 
           <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-attribute">media</span><span class="code-keyword">="</span><span class="code-keyword">all"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">scripts/jquery-1.4.4.min.js"</span>
           <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">&gt;</span><span class="code-keyword">&lt;/</span><span class="code-leadattribute">script</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">scripts/jquery.dataTables.min.js"</span> 
           <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">&gt;</span><span class="code-keyword">&lt;/</span><span class="code-leadattribute">script</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">script</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">&gt;</span>
        $(document).ready(<span class="code-keyword">function</span> () {
            $(<span class="code-string">"</span><span class="code-string">#companies"</span>).dataTable({
                <span class="code-string">"</span><span class="code-string">sPaginationType"</span>: <span class="code-string">"</span><span class="code-string">full_numbers"</span>,
                <span class="code-string">"</span><span class="code-string">bJQueryUI"</span>: <span class="code-keyword">true</span>
            });
        });
        <span class="code-keyword">&lt;/</span><span class="code-leadattribute">script</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">head</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-leadattribute">body</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">dt_example"</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">div</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">container"</span><span class="code-keyword">&gt;</span>
            <span class="code-keyword">&lt;</span><span class="code-leadattribute">div</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">demo_jui"</span><span class="code-keyword">&gt;</span>
                <span class="code-keyword">&lt;</span><span class="code-leadattribute">table</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">companies"</span> <span class="code-attribute">class</span><span class="code-keyword">="</span><span class="code-keyword">display"</span><span class="code-keyword">&gt;</span>
                    <span class="code-keyword">&lt;</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Company name<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Address<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Town<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                        <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                    <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                    <span class="code-keyword">&lt;</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
                      <span class="code-pagedirective">&lt;%</span> <span class="code-keyword">for</span>(Company c: DataRepository.GetCompanies()){ %&gt;
                    &lt;tr&gt;
                             &lt;td&gt;&lt;%=c.getName()%&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;%=c.getAddress()%&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;%=c.getTown()%&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;% } %&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
         &lt;/div&gt;
        &lt;/div&gt; 
    &lt;/body&gt;
&lt;/html&gt;</pre>
<p>In this JSP page is included all the necessary JavaScript libraries, 
and HTML code for the company table is generated. For demonstration 
purposes, a simple loop generates 
a <code>TR</code> for each company that is returned by the repository 
class. However, in your applications, you can use any server-side 
processing you want (JavaBeans, 
JSTL components, etc.) because the jQuery DataTables plug-in is 
independent of the applied server-side technology.</p>
<p>In the document-ready JavaScript event handler, the plain generated 
table is enhanced with the jQuery DataTables plug-in. There are two 
parameters that are passed 
to the plug-in initialization function (these are two parameters I 
always use):</p>
<ol>
<li><code>sPagination</code> - instructing the plug-in to generate pagination with numbers instead of two previous-next buttons, as is generated by default.</li>
<li><code>bJQueryUI</code> - applying standard jQueryUI styles.</li>
</ol>
<p>Instead of the plain HTML table, the following component is shown on the client side:</p>
<p><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/datatable.png" height="275" width="640"></p>
<p>All actions you see in the component are implemented on the client-side (e.g., when you enter text in the text box, <code>TR</code>
 elements are filtered). 
This is the fastest way for the user, under the assumption that the time
 required to load the table is not too big. If you have a huge amount of
 data, you might consider 
using DataTables in AJAX mode where only partial results are returned to
 the plug-in. </p>
<p>These are just basic functionalities provided by the DataTables plug-in and you can see more details 
in the <a id="ctl00_MC_AR_ctl11_CAR_Title" href="http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl">Enhancing HTML tables using the 
jQuery DataTables plug-in</a> article. Also, you can use a lot of other enhancements such as:</p>
<ol>
<li>Enabling Excel-like navigation with arrows using the <a href="http://datatables.net/extras/keytable/">KeyTable</a> extension for DataTables, 
freezing columns using the <a href="http://datatables.net/extras/fixedcolumns/">FixedColumns</a> plugin, 
or heading rows using the <a href="http://datatables.net/extras/fixedheader/">FixedHeader</a> plugin.</li>
<li>Enabling inline click-and-edit editing of cells in the table using the <a href="http://code.google.com/p/jquery-datatables-editable/">DataTables Editable</a> plugin.</li>
<li>Grouping rows using the <a href="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/index.html">Row Grouping</a> plugin.</li>
<li>Advanced filtering using the <a href="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html">Column Filter plugin</a> 
or <a href="http://datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets">Column Filter Widget</a> plugin.</li>
<li>Column hiding and reordering using the <a href="http://datatables.net/extras/colvis/">ColVis</a> and 
<a href="http://datatables.net/extras/colreorder/">ColReorder</a> plugins.</li>
<li>Row reordering using the <a href="http://code.google.com/p/jquery-datatables-row-reordering/">Row reordering</a> plugin.</li>
<li>Exporting data into CSV, Excel, PDF using the <a href="http://datatables.net/extras/tabletools/">TableTools</a> plugin.</li>
<li>Enabling instant scrolling of AJAXified data using the <a href="http://datatables.net/extras/scroller/">Scroller</a> plugin.</li>
</ol>
<p>You can see a complete list of additional DataTable plugins on the <a href="http://datatables.net/extras/" target="_blank">DataTables site</a>. 
All these plug-ins are additional add-ons for DataTables, but you can also use 
the powerful DataTables API to customize behavior. An example of the plain table enhanced 
with a few mentioned plugins is shown in the following figure:</p>
<p><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/datatableplugins.png" height="455" width="640"></p>
<p>In this example are added a grouping plugin that partitions rows by 
the first letter of the company name, and columns filter widget that 
adds filtering dropdowns 
above the table. In the figure above, companies are filtered by the town
 London. Adding these plugins is easy - you will just need to modify 
the initialization call and 
if needed add some parameters as shown in the following example:</p>
<div style="display:block" width="100%" id="premain3" class="pre-action-link"><img preid="3" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg3" height="9" width="9"><span preid="3" style="cursor: pointer; margin-bottom: 0px;" id="precollapse3"> Collapse</span><span> | </span><a preid="3" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre3" lang="jscript">$(document).ready(<span class="code-keyword">function</span> () {
    $(<span class="code-string">"</span><span class="code-string">#companies"</span>).dataTable({
        <span class="code-string">"</span><span class="code-string">sPaginationType"</span>: <span class="code-string">"</span><span class="code-string">full_numbers"</span>,
        <span class="code-string">"</span><span class="code-string">bJQueryUI"</span>: <span class="code-keyword">true</span>,
        <span class="code-string">"</span><span class="code-string">sDom"</span>: <span class="code-string">'</span><span class="code-string">W&lt;"clear"&gt;lfrtip'</span>
    })
    .rowGrouping({sGroupBy: <span class="code-string">"</span><span class="code-string">letter"</span>, bHideGroupingColumn: <span class="code-keyword">false</span>})
});</pre>
<p>If you have a reasonable amount of records in the table you do not 
need to worry about these functionalities. Just render a plain table and
 apply 
some combination of plug-ins that you need.</p><p>However, if you have a
 lot of records that are shown in the table and you want to avoid 
complex JavaScript 
processing in the browser, you can implement the processing logic on the
 server-side (e.g., in some servlet), and setup DataTables to query 
the server via AJAX calls 
in order to take information that should be displayed. This mode is 
described in the following section. </p>
<h3><a name="ServerSideProcessing" title="ServerSideProcessing" class="anchor" id="ServerSideProcessing"></a>Fully AJAXified table - 
Server side processing mode</h3>
<p>With the jQuery DataTables plugin, it is possible to implement 
client-server interaction by configuring DataTables to query the server 
via AJAX calls 
in order to fetch the required data. In this case, the plug-in will 
maintain UI state on the client-side, handle all events, but it will not
 process data at all. 
Instead of this it will call the server side page, post information 
about the current state and required data, take the response from the 
server, and refresh the table content.</p>
<p>On the DataTables site, there is an example of server-side 
configuration where the jQuery DataTables plug-in sends requests to a 
PHP page and gets data 
that should be shown in the current view. The server response is 
formatted as a JSON object, parsed on the client side, and displayed in 
the table body. </p>
<p>In this case, each event (changing the number of items that should be
 displayed per page, entering keyword in search filter, sorting, 
pressing pagination button, etc.) 
triggers the DataTables plug-in to send information about the current 
page, the search filter, and the sort column to the server page. As 
shown in the request, the server page 
returns JSON as a result and DataTables uses that data array when 
displaying the current table page. In this mode, instead of taking the 
complete page at once, several smaller requests are sent whenever new 
information is required, and minimal amount of data is returned from the
 
server. DataTables, in this example, calls the <em>/CompanyAjaxDataSource</em>
 URL and sends information about the user action. A full example of the 
server-side configuration of the jQuery DataTables plug-in can be found 
here. A major problem with the server-side mode is the implementation 
of server-side logic that accepts parameters from the client-side 
component, performs action, and returns data as expected. </p>
<p>In AJAX mode, only a minimal amount of data is provided to the 
plug-in using JSON. The plug-in sends AJAX requests to the server 
containing information of the current 
state of the view (current page, filter criterion, page number, etc.). 
The server accepts the AJAX call and determines what information should 
be shown on the client side 
and returns a JSON response back to the plug-in. Note that in this case,
 processing must be implemented on the server side.</p>
<p>In AJAX mode, no relevant information is generated in the view page, 
therefore it can be even a static HTML page. An example of the HTML page
 used in this example is shown 
in the following listing:</p>
<div style="display:block" width="100%" id="premain4" class="pre-action-link"><img preid="4" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg4" height="9" width="9"><span preid="4" style="cursor: pointer; margin-bottom: 0px;" id="precollapse4"> Collapse</span><span> | </span><a preid="4" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre4" lang="html"><span class="code-keyword">&lt;</span><span class="code-leadattribute">!DOCTYPE</span> <span class="code-attribute">html</span><span class="code-keyword">&gt;</span>
<span class="code-keyword">&lt;</span><span class="code-leadattribute">html</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-leadattribute">head</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">title</span><span class="code-keyword">&gt;</span>Using jQuery DataTables plugin with AJAX 
           source implemented in Java web application<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">title</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/dataTables/demo_page.css"</span> 
           <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/dataTables/demo_table.css"</span> 
           <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/dataTables/demo_table_jui.css"</span> 
           <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/themes/base/jquery-ui.css"</span> 
          <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-attribute">media</span><span class="code-keyword">="</span><span class="code-keyword">all"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">link</span> <span class="code-attribute">href</span><span class="code-keyword">="</span><span class="code-keyword">media/themes/smoothness/jquery-ui-1.7.2.custom.css"</span> 
          <span class="code-attribute">rel</span><span class="code-keyword">="</span><span class="code-keyword">stylesheet"</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/css"</span> <span class="code-attribute">media</span><span class="code-keyword">="</span><span class="code-keyword">all"</span> <span class="code-keyword">/</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">scripts/jquery-1.4.4.min.js"</span> 
          <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">&gt;</span><span class="code-keyword">&lt;/</span><span class="code-leadattribute">script</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">script</span> <span class="code-attribute">src</span><span class="code-keyword">="</span><span class="code-keyword">scripts/jquery.dataTables.min.js"</span> 
          <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">&gt;</span><span class="code-keyword">&lt;/</span><span class="code-leadattribute">script</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">script</span> <span class="code-attribute">type</span><span class="code-keyword">="</span><span class="code-keyword">text/javascript"</span><span class="code-keyword">&gt;</span>
        $(document).ready(<span class="code-keyword">function</span> () {
            $(<span class="code-string">"</span><span class="code-string">#companies"</span>).dataTable({
                <span class="code-string">"</span><span class="code-string">bServerSide"</span>: <span class="code-keyword">true</span>,
                <span class="code-string">"</span><span class="code-string">sAjaxSource"</span>: <span class="code-string">"</span><span class="code-string">/JQueryDataTables/CompanyAjaxDataSource"</span>,
                <span class="code-string">"</span><span class="code-string">bProcessing"</span>: <span class="code-keyword">true</span>,
                <span class="code-string">"</span><span class="code-string">sPaginationType"</span>: <span class="code-string">"</span><span class="code-string">full_numbers"</span>,
                <span class="code-string">"</span><span class="code-string">bJQueryUI"</span>: <span class="code-keyword">true</span>
            });
        });
        <span class="code-keyword">&lt;/</span><span class="code-leadattribute">script</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">head</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-leadattribute">body</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">dt_example"</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">div</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">container"</span><span class="code-keyword">&gt;</span>
            <span class="code-keyword">&lt;</span><span class="code-leadattribute">div</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">demo_jui"</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-leadattribute">table</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">companies"</span> <span class="code-attribute">class</span><span class="code-keyword">="</span><span class="code-keyword">display"</span><span class="code-keyword">&gt;</span>
              <span class="code-keyword">&lt;</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                  <span class="code-keyword">&lt;</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                       <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Company name<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                       <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Address<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                       <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Town<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                  <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
              <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
              <span class="code-keyword">&lt;</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
              <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">table</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">div</span><span class="code-keyword">&gt;</span>
        <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">div</span><span class="code-keyword">&gt;</span>
    <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">body</span><span class="code-keyword">&gt;</span>
<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">html</span><span class="code-keyword">&gt;</span></pre>
<p>As you can see, the table body is completely empty because the jQuery
 DataTables plug-in will be populated using the AJAX call. In the 
document ready event, 
DataTables is initialized with three additional parameters:</p>
<ul>
<li><code>bServerSide</code> that instructs the DataTables plug-in to take information from the server-side</li>
<li><code>sAjaxSource</code> that defines that URL that should be called by the plug-in to take data</li>
<li><code>bProcessing</code> (optional) used to show the "Processing" message while the AJAX call is executing</li>
</ul>
<p>The key part of the server-side code is the component that will 
provide data to the jQuery DataTables plugin - in this case, this is the
 component on the server-side 
that reacts when the <code>sAjaxSource</code> page is called. This can 
be anything: servlet, JSP page, or any server-side code that returns a 
JSON response based 
on the parameters sent from the plug-in. The jQuery DataTables plug-in 
sends a lot of parameters to the server-side; you can find a detailed 
documentation 
on the <a href="http://www.datatables.net/">DataTables</a> site, but here are the most important ones:</p>
<ul>
<li><code>sEcho</code> - Integer value that is used by DataTables for 
synchronization purposes. Response from the server-side code should 
return the same value to the plug-in.</li>
<li><code>sKeyword</code> - Text entered in the filter text box and it should be used for filtering records.</li>
<li><code>iDisplayStart</code> - First record that should be shown (used for pagination).</li>
<li><code>iDisplayLength</code> - The number of records that should be returned (this value is equal to the value selected in the 'Show <em>XXX </em>items per page' dropdown). 
This value is also used for pagination.</li>
<li><code>iColumns</code> - The number of columns in the table.</li>
<li><code>iSortingCols</code> - The number of columns used for ordering.
 Usually this value is 1, but if the user orders results by more than 
one column (holding the SHIFT 
key while clicking on the header cells), the DataTables plug-in will 
send information about the number of columns you should use for ordering
 results.</li>
<li><code>iSortCol_0</code>, <code>iSortCol_1</code>, <code>iSortCol_2</code>, etc. - The IDs of the columns used for ordering results. If results are ordered by one column, 
you should order results by the <code>iSortCol_0</code> column.</li>
<li><code>sSortDir_0</code>, <code>sSortDir_1</code>, <code>sSortDir_2</code>, etc. - The sort direction for each of the columns used for ordering. If results are ordered 
by one column, an "asc" or "desc" value will be returned in the <code>sSortDir_0</code> parameter. In the case of multi-column ordering, each parameter 
in this array will have a direction that matches the column in the <code>iSortCol_</code> parameter.</li>
</ul>
<p>The server-side component should have the GET method handler that 
will be called when the plug-in sends an AJAX request. This method 
should take the parameters 
described above, process data, and prepare values that will be sent to 
the plug-in. An example of the response that is returned back from the 
servlet is shown in the example below:</p>
<div style="display:block" width="100%" id="premain5" class="pre-action-link"><img preid="5" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg5" height="9" width="9"><span preid="5" style="cursor: pointer; margin-bottom: 0px;" id="precollapse5"> Collapse</span><span> | </span><a preid="5" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre5" lang="jscript">{   <span class="code-string">"</span><span class="code-string">sEcho"</span>:<span class="code-string">"</span><span class="code-string">1"</span>,
    <span class="code-string">"</span><span class="code-string">iTotalRecords"</span>:<span class="code-digit">97</span>,
    <span class="code-string">"</span><span class="code-string">iTotalDisplayRecords"</span>:<span class="code-digit">9</span>,
    <span class="code-string">"</span><span class="code-string">aaData"</span>:[    
            [<span class="code-string">"</span><span class="code-string">Zander Exports"</span>, <span class="code-string">"</span><span class="code-string">34 Sapcote Trading Centre"</span>, <span class="code-string">"</span><span class="code-string">London"</span>],
            [<span class="code-string">"</span><span class="code-string">Windsong International"</span>, <span class="code-string">"</span><span class="code-string">Heather Court"</span>, <span class="code-string">"</span><span class="code-string">Kent"</span>],
            [<span class="code-string">"</span><span class="code-string">Wilkinson Turner King"</span>, <span class="code-string">"</span><span class="code-string">10A London Road"</span>, <span class="code-string">"</span><span class="code-string">Cheshire"</span>],
            [<span class="code-string">"</span><span class="code-string">Web User"</span>, <span class="code-string">"</span><span class="code-string">IPC Media"</span>, <span class="code-string">"</span><span class="code-string">London "</span>],
            [<span class="code-string">"</span><span class="code-string">Way to Blue"</span>, <span class="code-string">"</span><span class="code-string">First Floor"</span>, <span class="code-string">"</span><span class="code-string">London"</span>],
            [<span class="code-string">"</span><span class="code-string">Warner Home DVD"</span>, <span class="code-string">"</span><span class="code-string">Warner House"</span>, <span class="code-string">"</span><span class="code-string">London"</span>],
            [<span class="code-string">"</span><span class="code-string">Vivante Music Ltd"</span>, <span class="code-string">"</span><span class="code-string">32 The Netherlands"</span>, <span class="code-string">"</span><span class="code-string">Surrey"</span>],
            [<span class="code-string">"</span><span class="code-string">Vinyl Music"</span>, <span class="code-string">"</span><span class="code-string">1 Minerva Works"</span>, <span class="code-string">"</span><span class="code-string">West Yorkshire"</span>],
            [<span class="code-string">"</span><span class="code-string">Villa Audio Ltd"</span>, <span class="code-string">"</span><span class="code-string">Baileys Yard"</span>, <span class="code-string">"</span><span class="code-string">Essex"</span>]
        ]
}</pre>
<p>Values that the server returns to the DataTables plug-in are:</p>
<ul>
<li><code>sEcho</code> - An integer value that is used by DataTables for
 synchronization purposes. On each call sent to the server-side page, 
the DataTables plug-in sends 
the sequence number in the <code>sEcho</code> parameter. The same value 
has to be returned in the response because DataTables uses this for 
synchronization and matching requests and responses.</li>
<li><code>iTotalRecords</code> - The integer value that represents the 
total unfiltered number of records that exist on the server-side and 
that might be displayed 
if no filter is applied. This value is used only for display purposes; 
when the user types in a keyword in the search text box, DataTables 
shows 
a "Showing 1 to 10 of 23 entries (filtered from 51 total entries)" 
message. In this case, the <code>iTotalRecords</code> value returned in the response equals 51.</li>
<li><code>iTotalDisplayedRecords</code> - The integer value that represents the number of records that match the current filter. If the user does not enter 
any value in the search text box, this value should be the same as the <code>iTotalRecords</code>
 value. The DataTables plug-in uses this value to determine 
how many pages will be required to generate pagination - if this value 
is less or equal than the current page size, the pagination buttons will
 be disabled. 
When the user types in a keyword in the search text box, DataTables 
shows a "Showing 1 to 10 of 23 entries (filtered from 51 total entries)"
 message. 
In this case, the <code>iTotalDisplayedRecords</code> value returned in the response equals 23.</li>
<li><code>aaData</code> - A two-dimensional array that represents the cell values that will be shown in the table. When DataTables receives data, 
it will populate the table cells with values from the <code>aaData</code>
 array. The number of columns in the two dimensional array must match 
the number of columns in the HTML table (even the hidden ones), and the 
number of rows should be equal to the number of items that can be shown 
on the current page (e.g., 10, 25, 50, or 100 - this value is selected 
in the "Show XXX entries" drop-down).</li>
</ul>
<p>In this case is returned a matrix of cells that will be displayed. 
However, this is not the only format you can use. You can also return 
an array of JSON objects in the following format:</p>
<div style="display:block" width="100%" id="premain6" class="pre-action-link"><img preid="6" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg6" height="9" width="9"><span preid="6" style="cursor: pointer; margin-bottom: 0px;" id="precollapse6"> Collapse</span><span> | </span><a preid="6" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre6" lang="jscript">{
    <span class="code-string">"</span><span class="code-string">sEcho"</span>:<span class="code-string">"</span><span class="code-string">1"</span>,
    <span class="code-string">"</span><span class="code-string">iTotalRecords"</span>:<span class="code-digit">73</span>,
    <span class="code-string">"</span><span class="code-string">iTotalDisplayRecords"</span>:<span class="code-digit">51</span>,
    <span class="code-string">"</span><span class="code-string">aaData"</span>:[   
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Zane Music"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">162 Castle Hill"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">Berkshire"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Zander Exports"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">34 Sapcote Trading Centre"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">London"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Windsong International"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">Heather Court"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">Kent"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Wilkinson Turner King"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">10A London Road"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">Cheshire"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Web User"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">IPC Media"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">London "</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Way to Blue"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">First Floor"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">London"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Warner Home DVD"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">Warner House"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">London"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Vivante Music Ltd"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">32 The Netherlands"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">Surrey"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Vinyl Music"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">1 Minerva Works"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">West Yorkshire"</span>},
            {<span class="code-string">"</span><span class="code-string">name"</span>:<span class="code-string">"</span><span class="code-string">Villa Audio Ltd"</span>,<span class="code-string">"</span><span class="code-string">address"</span>:<span class="code-string">"</span><span class="code-string">Baileys Yard"</span>,<span class="code-string">"</span><span class="code-string">town"</span>:<span class="code-string">"</span><span class="code-string">Essex"</span>}
        ]
}</pre>
<p>In this case is returned named properties in the array, instead of 
the array of arrays like in the previous case. The DataTable 
initialization call 
should be slightly changed because we would need to map properties in 
the objects to the table columns. 
The initialization call is shown in the following code:</p>
<div style="display:block" width="100%" id="premain7" class="pre-action-link"><img preid="7" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg7" height="9" width="9"><span preid="7" style="cursor: pointer; margin-bottom: 0px;" id="precollapse7"> Collapse</span><span> | </span><a preid="7" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre7" lang="jscript">$(document).ready(<span class="code-keyword">function</span> () {
    $(<span class="code-string">"</span><span class="code-string">#companies"</span>).dataTable({
        <span class="code-string">"</span><span class="code-string">bServerSide"</span>: <span class="code-keyword">true</span>,
        <span class="code-string">"</span><span class="code-string">sAjaxSource"</span>: <span class="code-string">"</span><span class="code-string">/JQueryDataTablesAll/CompanyGsonObjects"</span>,
        <span class="code-string">"</span><span class="code-string">bProcessing"</span>: <span class="code-keyword">true</span>,
        <span class="code-string">"</span><span class="code-string">sPaginationType"</span>: <span class="code-string">"</span><span class="code-string">full_numbers"</span>,
        <span class="code-string">"</span><span class="code-string">bJQueryUI"</span>: <span class="code-keyword">true</span>,
        <span class="code-string">"</span><span class="code-string">aoColumns"</span>: [
                      { <span class="code-string">"</span><span class="code-string">mDataProp"</span>: <span class="code-string">"</span><span class="code-string">name"</span> },
                      { <span class="code-string">"</span><span class="code-string">mDataProp"</span>: <span class="code-string">"</span><span class="code-string">address"</span> },
                      { <span class="code-string">"</span><span class="code-string">mDataProp"</span>: <span class="code-string">"</span><span class="code-string">town"</span> }
                  ]
    });
});</pre>
<p>In this example is added mapping of properties to columns in the <code>aoColumns</code> parameter of the DataTable initialization call.</p>
<h4><a name="Servlet" title="Servlet" class="anchor" id="Servlet"></a>Servlet implementation</h4>
<p>Any Java server-side component that accepts the parameters described 
above and returns the expected JSON result can be used. In this example,
 
a plain servlet is used for demonstration purposes, but you can use any 
other component. The servlet used in this example has a <code>doGet</code> method that 
accepts parameters and returns a JSON object. The following listing shows an example of the get method:</p>
<div style="display:block" width="100%" id="premain8" class="pre-action-link"><img preid="8" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg8" height="9" width="9"><span preid="8" style="cursor: pointer; margin-bottom: 0px;" id="precollapse8"> Collapse</span><span> | </span><a preid="8" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre8" lang="java"><span class="code-keyword">protected</span> <span class="code-keyword">void</span> doGet(HttpServletRequest request, HttpServletResponse response) 
               <span class="code-keyword">throws</span> ServletException, IOException {
    JQueryDataTableParamModel param = DataTablesParamUtility.getParam(request);    
    <span class="code-sdkkeyword">String</span> sEcho = param.sEcho;
    <span class="code-keyword">int</span> iTotalRecords; <span class="code-comment">//</span><span class="code-comment"> total number of records (unfiltered)
</span>    <span class="code-keyword">int</span> iTotalDisplayRecords;<span class="code-comment">//</span><span class="code-comment">value will be set when code filters companies by keyword
</span>
    <span class="code-comment">//</span><span class="code-comment">Filtering companies
</span>    <span class="code-comment">//</span><span class="code-comment">Ordering companies
</span>    <span class="code-comment">//</span><span class="code-comment">Pagination
</span>    <span class="code-comment">//</span><span class="code-comment">Generate JSON response
</span>}</pre>
<p>The servlet is mapped on the <em>/CompanyAjaxDataSource</em> URL and the get method takes parameters sent by the plug-in. For this purpose, we have added two utility 
classes: <code>JQueryDataTableParamModel</code> containing the properties that are sent by the plug-in, and <code>DataTablesParamUtility</code> 
that loads the values of the <code>JQueryDataTableParamModel</code> from
 the request. Also, in this part of code, values that will be sent to 
the plug-in are prepared. 
The actual code that populates properties from the request is omitted, 
but you can find the code in the code example. Note that properties in 
this class have the same 
names as the parameters sent by the plug-in so you can easily follow the
 code.</p>
<p>The first action that needs to be done on the server-side is 
filtering of companies by the keyword provided by the plug-in. This code
 is shown in the listing below:</p>
<div style="display:block" width="100%" id="premain9" class="pre-action-link"><img preid="9" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg9" height="9" width="9"><span preid="9" style="cursor: pointer; margin-bottom: 0px;" id="precollapse9"> Collapse</span><span> | </span><a preid="9" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre9" lang="java">iTotalRecords = DataRepository.GetCompanies().size();
List&lt;Company&gt; companies = <span class="code-keyword">new</span> LinkedList&lt;Company&gt;();
<span class="code-keyword">for</span>(Company c : DataRepository.GetCompanies()){
    <span class="code-keyword">if</span>(    c.getName().toLowerCase().contains(param.sSearch.toLowerCase())
                ||
        c.getAddress().toLowerCase().contains(param.sSearch.toLowerCase())
                ||
        c.getTown().toLowerCase().contains(param.sSearch.toLowerCase()))
    {
        companies.add(c); <span class="code-comment">//</span><span class="code-comment"> Add a company that matches search criterion
</span>    }
}
iTotalDisplayRecords = companies.size();
<span class="code-comment">//</span><span class="code-comment">Number of companies that matches search criterion should be returned</span></pre>
<p>The keyword entered in the filter text box is placed in the <code>param.sSearch</code> string. In this example, <code>iTotalRecords</code>
 
is set to the total number of companies that are in the list, a search 
is performed by the company properties, and a new list of filtered 
companies 
that contains the keyword are added in the list. The number of filtered 
companies is placed in the <code>iTotalDisplayRecords</code> variable. 
In the second part of the code, companies are ordered by column. The 
following code shows ordering done using the index of the column that 
should be sorted and the direction. On the server-side code, you will 
need to know what column indexes match properties in the <code>Company</code> class.</p>
<div style="display:block" width="100%" id="premain10" class="pre-action-link"><img preid="10" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg10" height="9" width="9"><span preid="10" style="cursor: pointer; margin-bottom: 0px;" id="precollapse10"> Collapse</span><span> | </span><a preid="10" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre10" lang="java"><span class="code-keyword">final</span> <span class="code-keyword">int</span> sortColumnIndex = param.iSortColumnIndex;
<span class="code-keyword">final</span> <span class="code-keyword">int</span> sortDirection = param.sSortDirection.equals(<span class="code-string">"</span><span class="code-string">asc"</span>) ? -<span class="code-digit">1</span> : <span class="code-digit">1</span>;

Collections.sort(companies, <span class="code-keyword">new</span> Comparator&lt;Company&gt;(){
    <span class="code-sdkkeyword">@Override</span>
    <span class="code-keyword">public</span> <span class="code-keyword">int</span> compare(Company c1, Company c2) {    
        <span class="code-keyword">switch</span>(sortColumnIndex){
        <span class="code-keyword">case</span> <span class="code-digit">0</span>:
            <span class="code-keyword">return</span> c1.getName().compareTo(c2.getName()) * sortDirection;
        <span class="code-keyword">case</span> <span class="code-digit">1</span>:
            <span class="code-keyword">return</span> c1.getAddress().compareTo(c2.getAddress()) * sortDirection;
        <span class="code-keyword">case</span> <span class="code-digit">2</span>:
            <span class="code-keyword">return</span> c1.getTown().compareTo(c2.getTown()) * sortDirection;
        }
        <span class="code-keyword">return</span> <span class="code-digit">0</span>;
    }
});</pre>
<p>This is a simplified case where it is assumed that ordering is done by one single column and that 
the index of the column that will be used for sorting and the direction 
are placed in the <code>param.iSortColumIndex</code> and <code>param.sSortDirection</code> properties.</p>
<p>The last functionality that should be implemented is pagination. The current page and the length are placed in the <code>iDisplayStart</code> and <code>iDisplayLength</code>
 
properties, and these properties are used to get the sub list that 
should be returned to the plug-in. An example is shown in the following 
listing:</p>
<div style="display:block" width="100%" id="premain11" class="pre-action-link"><img preid="11" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg11" height="9" width="9"><span preid="11" style="cursor: pointer; margin-bottom: 0px;" id="precollapse11"> Collapse</span><span> | </span><a preid="11" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre11" lang="java"><span class="code-keyword">if</span>(companies.size()&lt; param.iDisplayStart + param.iDisplayLength)
    companies = companies.subList(param.iDisplayStart, companies.size());
<span class="code-keyword">else</span>
    companies = companies.subList(param.iDisplayStart, 
                   param.iDisplayStart + param.iDisplayLength);</pre>
<p>When the list is prepared, a JSON object that represents the response
 should be created. The code for creating the JSON response is:</p>
<div style="display:block" width="100%" id="premain12" class="pre-action-link"><img preid="12" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg12" height="9" width="9"><span preid="12" style="cursor: pointer; margin-bottom: 0px;" id="precollapse12"> Collapse</span><span> | </span><a preid="12" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre12" lang="java"><span class="code-keyword">try</span> {
    JsonObject jsonResponse = <span class="code-keyword">new</span> JsonObject();
    
    jsonResponse.addProperty(<span class="code-string">"</span><span class="code-string">sEcho"</span>, sEcho);
    jsonResponse.addProperty(<span class="code-string">"</span><span class="code-string">iTotalRecords"</span>, iTotalRecords);
    jsonResponse.addProperty(<span class="code-string">"</span><span class="code-string">iTotalDisplayRecords"</span>, iTotalDisplayRecords);
    
    Gson gson = <span class="code-keyword">new</span> Gson();
    
    <span class="code-keyword">for</span>(Company c : companies){
        JsonArray row = <span class="code-keyword">new</span> JsonArray();
        row.add(<span class="code-keyword">new</span> JsonPrimitive(c.getName()));
        row.add(<span class="code-keyword">new</span> JsonPrimitive(c.getAddress()));
        row.add(<span class="code-keyword">new</span> JsonPrimitive(c.getTown()));
        data.add(row);
    }
    jsonResponse.add(<span class="code-string">"</span><span class="code-string">aaData"</span>, data);
    
    response.setContentType(<span class="code-string">"</span><span class="code-string">application/Json"</span>);
    response.getWriter().print(jsonResponse.toString());
} <span class="code-keyword">catch</span> (JsonIOException e) {
    e.printStackTrace();
    response.setContentType(<span class="code-string">"</span><span class="code-string">text/html"</span>);
    response.getWriter().print(e.getMessage());
}</pre>
<p>This example has the echo, total records, and total filtered records 
properties. Also, the data properties have the matrix containing the 
name, address, 
and town information. When this object is returned to the plug-in, 
filtered information is shown in the table on the client side. </p>
<p>As you saw earlier, you can output either a matrix or an array of objects back to 
the DataTable. If you want to output an array of objects, the code is slightly different:</p>
<div style="display:block" width="100%" id="premain13" class="pre-action-link"><img preid="13" style="cursor: pointer;" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/minus.gif" id="preimg13" height="9" width="9"><span preid="13" style="cursor: pointer; margin-bottom: 0px;" id="precollapse13"> Collapse</span><span> | </span><a preid="13" href="#">Copy Code</a></div><pre style="margin-top: 0px;" id="pre13" lang="java">Gson gson = <span class="code-keyword">new</span> Gson();
<span class="code-keyword">try</span> {

    JsonObject jsonResponse = <span class="code-keyword">new</span> JsonObject();
    
    jsonResponse.addProperty(<span class="code-string">"</span><span class="code-string">sEcho"</span>, sEcho);
    jsonResponse.addProperty(<span class="code-string">"</span><span class="code-string">iTotalRecords"</span>, iTotalRecords);
    jsonResponse.addProperty(<span class="code-string">"</span><span class="code-string">iTotalDisplayRecords"</span>, iTotalDisplayRecords);
    jsonResponse.add(<span class="code-string">"</span><span class="code-string">aaData"</span>, gson.toJsonTree(companies));
    
    response.setContentType(<span class="code-string">"</span><span class="code-string">application/Json"</span>);
    response.getWriter().print(jsonResponse.toString());
} <span class="code-keyword">catch</span> (JsonIOException e) {
    e.printStackTrace();
    response.setContentType(<span class="code-string">"</span><span class="code-string">text/html"</span>);
    response.getWriter().print(e.getMessage());
}</pre>
<p>In this example is used the GSON library for serializing Java objects
 to JSON, but you can use any other JSON serialization library instead.</p>
<p>In this example, processing is done in plain source code; however, in
 your application, you can use other methods such as SQL, Stored 
Procedures, HQL, etc. You can find 
an example that generates JSON response from the database on the <a href="http://datatables.net/development/server-side/jsp" target="_blank">DataTables site</a>. 
The only important thing is that you return a JSON response with objects that match the current state on the table.</p>
<h2>Conclusion</h2>
<p>This example shows how you can create effective, fully functional 
tables in a Java web application using the jQuery DataTables plug-in. 
Using the code examples 
in the article, you can significantly enhance the look and 
functionalities of your web application. I recommend that you try it - 
when you integrate jQuery 
DataTables in a few tables in your application, you will see that the 
implementation is straightforward and that you will be, with some 
practice, able to implement 
a lot of functionalities with very little effort.</p>
<p>You can download the code example in the attached project that was 
created in 
the Eclipse Java EE IDE for Web Developers, that runs on a Tomcat 6.0 
web server. 
If you have the same configuration, you can run and try this project, 
and if you have any other development environment, I suggest you create a
 new project, 
configure it, and add classes that you can find in the project. I hope 
that this example will help you to create better table interfaces.</p>
<p>If you are interested in adding full Web 2.0 CRUD functionalities to jQuery DataTables, I recommend another article <a href="http://www.codeproject.com/KB/java/J2EE-Editable-Web-Table.aspx">Adding data management 
(CRUD) functionalities to web tables</a>, where I have explained how you can configure plugin to 
automatically add inline editing, deleting, and adding new records 
functionalities to the jQuery DataTables plugin.</p>


						</div>
						

						<div class="float-right" style="margin:20px 0 0 10px;border:1px solid #ccc">
						<div class="msg-300x250" data-format="300x250" data-type="ad" data-publisher="lqm.codeproject.site" data-zone="Languages/Java/General" data-loadonview="true" data-tags="Java, Ajax, jQuery, DataTable,rating4.5"><iframe id="dmad3" allowtransparency="false" style="z-index:10" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="250" width="300"></iframe></div>
						</div>
                        
                        
						
						<h2>License</h2>
						<div id="LicenseTerms"><p>This article, along with any associated source code and files, is licensed under <a href="http://www.codeproject.com/info/cpol10.aspx" rel="license">The Code Project Open License (CPOL)</a></p></div>
						

                        
						<h2>Share</h2>
				        <div style="margin-bottom:40px;width:385px">
					        



<!-- Buttons start here. Copy this ul to your document. -->
<ul class="rrssb-buttons clearfix rrssb-1">
    <li data-size="34" data-initwidth="14.285714285714286" style="width: calc(100% - 252px);" class="email">

        <!-- Replace subject with your message using URL Endocding: http://meyerweb.com/eric/tools/dencoder/ -->
        <a href="mailto:?subject=jQuery+DataTables+in+Java+Web+Applications+-+CodeProject&amp;body=http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><g><path d="M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z"></path></g></svg>
            </span>
            <span class="text">email</span>
        </a>
    </li>
    <li data-size="45" data-initwidth="14.285714285714286" style="width: 42px;" class="twitter small">
        <!-- Replace href with your Meta and URL information  -->
        <a href="http://twitter.com/home?status=jQuery+DataTables+in+Java+Web+Applications+-+CodeProject%20http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications" class="popup">
            <span class="icon">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
                <path d="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32
                    c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155
                    C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965
                    C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683
                    c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851
                    C26.275,7.229,25.39,8.196,24.253,8.756z"></path>
                </svg>
            </span>
            <span class="text">twitter</span>
        </a>
    </li>

    <li data-size="57" data-initwidth="14.285714285714286" style="width: 42px;" class="facebook small">
        <!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: 
        https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
        <a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications" class="popup">
            <span class="icon">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
                    <path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434
                        c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726
                        c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"></path>
                </svg>
            </span>
            <span class="text">facebook</span>
        </a>
    </li>
    
    <li data-size="51" data-initwidth="14.285714285714286" style="width: 42px;" class="linkedin small">
        <!-- Replace href with your meta and URL information -->
        <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications&amp;title=jQuery+DataTables+in+Java+Web+Applications+-+CodeProject" class="popup">
            <span class="icon">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
                    <path d="M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803
                        c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048
                        h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501
                        c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546
                        C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z"></path>
                </svg>
            </span>
            <span class="text">linkedin</span>
        </a>
    </li>
    <li data-size="38" data-initwidth="14.285714285714286" style="width: 42px;" class="reddit small">
        <a href="http://www.reddit.com/submit?url=http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><g>
                <path d="M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z"></path>
                <path d="M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z"></path>
                <path d="M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 
                c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 
                4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 
                19.5 17.8 19.5 17.5 19.791z"></path><path d="M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 
                0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 
                2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 
                0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 
                2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 
                8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 
                3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 
                13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 
                13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 
                c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 
                0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 
                c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 
                C26.354 13.8 26.1 14.3 25.8 14.605z"></path></g></svg>
            </span>
            <span class="text">reddit</span>
        </a>
    </li>
    <li data-size="52" data-initwidth="14.285714285714286" style="width: 42px;" class="googleplus small">
        <!-- Replace href with your meta and URL information.  -->
        <a href="https://plus.google.com/share?url=Check%20out%20jQuery+DataTables+in+Java+Web+Applications+-+CodeProject%20http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications" class="popup">
            <span class="icon">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
                                c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
                                C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
                                c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
                                c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
                                c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
                                c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
                                c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
                                c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
                                c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"></path>
                            <polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
                                23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89      "></polygon>
                        </g>
                    </g>
                </svg>
            </span>
            <span class="text">google+</span>
        </a>
    </li>
    
    <li data-size="56" data-initwidth="14.285714285714286" style="width: 42px;" class="pinterest small">
        <!-- Replace href with your meta and URL information.  -->
        <a href="http://pinterest.com/pin/create/button/?url=http%3a%2f%2fwww.codeproject.com%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications&amp;media=http://kurtnoble.com/labs/rrssb/media/facebook-share.jpg&amp;description=jQuery+DataTables+in+Java+Web+Applications+-+CodeProject">
            <span class="icon">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
                <path d="M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785
                    C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458
                    c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557
                    c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168
                    C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239
                    c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z"></path>
                </svg>
            </span>
            <span class="text">pinterest</span>
        </a>
    </li>
</ul>
<!-- Buttons end here -->

				        </div> 
    			        


						
						<h2 id="ctl00_AboutHeading">About the Author</h2>
						

<div class="container">
<div style="width:210px;overflow:hidden;float:left;text-align:center">
	<img id="ctl00_AboutAuthorRptr_ctl00_AboutAuthor_memberPhoto" class="profile-pic" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/05355a84-95f8-4bdc-85e5-36d58e23ba69.jpg" style="border-width:0px;transform:rotate(-3deg);">
</div>
<div class="container-member float-left" style="margin:35px 15px 0 0;">
	<b><a id="ctl00_AboutAuthorRptr_ctl00_AboutAuthor_memberProfileLink" class="author" href="http://www.codeproject.com/Members/JocaPC">Jovan Popovic</a></b>
	<div class="company">
		<span id="ctl00_AboutAuthorRptr_ctl00_AboutAuthor_memberJobTitle">Architect</span>
		<span id="ctl00_AboutAuthorRptr_ctl00_AboutAuthor_memberCompany">Gowi</span> 
		<br><span id="ctl00_AboutAuthorRptr_ctl00_AboutAuthor_memberLocation">Serbia <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/RS.gif" alt="Serbia" height="11px" width="16px"></span>
	</div>
</div>
	
<div class="padded-top float-left clearfix">
	Started as a young scientist - winning the highest national awards in mathematics, physics, electrotechnics, and electronics.<br>
Graduated from Faculty of Electrical Engineering, Department of Computer
 Techniques and Informatics, University of Belgrade, Serbia, as a first 
in the class, as a Master of Software Sciences.<br>
Currently working in <a rel="nofollow" href="http://www.gowi.rs/">Gowi</a>
 as a Software engineer, architect, and project manager since 2004 - 
mostly using Microsoft technologies (ASP.NET, C#). Member of JQuery 
community - created few popular plugins (four popular JQuery DataTables 
add-ins and loadJSON template engine).<br>
Interests: Software engineering process(estimation and standardization), mobile and business intelligence platforms.

	

	
</div>
</div><br>
						
						

						<div class="clearfix"></div>

						<div style="padding-top:8px">
							
						</div>

						
						<div style="margin:auto;height:90px;margin-top:10px;Widt:730px"> 
							<div class="msg-728x90" data-format="728x90" data-type="ad" data-publisher="lqm.codeproject.site" data-zone="Languages/Java/General" data-loadonview="true" data-tags="Java, Ajax, jQuery, DataTable,rating4.5,pos_bottom"><iframe id="dmad4" allowtransparency="false" style="z-index:10" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="90" width="728"></iframe></div>
						</div>
						
					

				    
					</form>

				</div>

				
				

					<h2>Comments and Discussions</h2>
					<a class="float-left" name="_comments" id="_comments">&nbsp;</a><div id="_MessageBoardctl00_MessageBoard" onclick="return SwitchMessage(event, null)">
<table id="ForumTable" class="forum relaxed" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="header1 callout"><b>You must <a href="https://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications%3ffid%3d1703289%26df%3d90%26mpp%3d25%26noise%3d3%26prof%3dFalse%26sort%3dPosition%26view%3dNormal%26spc%3dRelaxed">Sign In</a> to use this message board.</b></td>
</tr><tr>
<td><table border="0" cellpadding="3px" cellspacing="0" width="100%">
<tbody><tr class="header1">
<td colspan="2" style="white-space:nowrap;"><div class="container">
<div class="float-right">
<form action="/Search.aspx?fid=0" method="get" class="searchbar">
<input name="fid" value="1703289" type="hidden"><b>Search Comments </b><input class="search" name="qf" type="search">&nbsp;<input value="Go" class="button" type="submit">
</form>
</div>
</div></td>
</tr><tr class="header2">
<td></td><td style="width:100%;"><div style="text-align:right;">
<form action="/script/Forums/SetOptions.aspx?floc=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications&amp;fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed" method="get" style="margin:0;padding:0;">
<input name="fid" value="1703289" type="hidden"><input name="currentQS" value="?floc=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications&amp;fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed" type="hidden"><input name="floc" value="/Articles/359750/jQuery-DataTables-in-Java-Web-Applications" type="hidden"><input name="prof" id="prof" style="vertical-align:middle;" type="checkbox"><label for="prof">Profile popups</label>&nbsp;&nbsp;&nbsp;&nbsp;Spacing<select size="1" class="dropdown" name="spc">
<option selected="selected" value="Relaxed">Relaxed</option><option value="Compact">Compact</option><option value="Tight">Tight</option>
</select>&nbsp;&nbsp;Noise<select size="1" class="dropdown" name="noise">
<option value="1">Very High</option><option value="2">High</option><option selected="selected" value="3">Medium</option><option value="4">Low</option><option value="5">Very Low</option>
</select>&nbsp;&nbsp;Layout<select size="1" class="dropdown" name="view">
<option selected="selected" value="Normal">Normal</option><option value="Topic">Open Topics</option><option value="Expanded">Open All</option><option value="Thread">Thread View</option>
</select>&nbsp;&nbsp;Per page<select size="1" class="dropdown" name="mpp">
<option value="10">10</option><option selected="selected" value="25">25</option><option value="50">50</option>
</select>&nbsp;&nbsp;&nbsp;<input value="Update" name="SetOpt" class="button" type="submit">
</form>
</div></td>
</tr>
</tbody></table></td>
</tr><tr>
<td><a name="xx0xx"></a><table border="0" cellpadding="2px" cellspacing="0" width="100%">
<tbody><tr class="navbar">
<td></td><td style="text-align:right;width:50%;"></td><td style="text-align:right;white-space:nowrap;"><span class="nav-link disabled">First</span> <span class="nav-link disabled">Prev</span><a class="nav-link" name="Frm_HoverNL" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed&amp;fr=26#xx0xx">Next</a></td>
</tr>
</tbody></table></td>
</tr><tr>
<td><table class="fixed-layout blank-background" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" border="0" height="5px" width="1px"></td>
</tr><tr id="F4896658_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4896658xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4896658" parent="0" thread="4896658" href="http://www.codeproject.com/Messages/4896658/O-n-y-yn-k.aspx">Одличан чланак</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=11060100">Давид Филиповић</a></td><td class="date">4-Sep-14  17:16&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4896658_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="11060100" msgid="4896658" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Јоване, овај текст је управо оно што ми је било потребно, велико хвала <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/smiley_smile.gif" alt="Smile | :)" align="top"> <br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4896658" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4896658/O-n-y-yn-k.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4896658" data-ref="3_4896658" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4886155_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4886155xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4886155" parent="0" thread="4886155" href="http://www.codeproject.com/Messages/4886155/Related-to-connection.aspx">Related to connection</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-group-16.gif" title="group" alt="group" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=11018722">Navjeet Singh Gaharwal</a></td><td class="date">19-Aug-14  22:20&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4886155_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="11018722" msgid="4886155" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Sir I was implement this project but I am not able to 
set database connection......please send me a proper code if u have...My
 mail id is --&gt; mca.navjeet@gmail.com....I really need it<br>
thank you<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4886155" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4886155/Related-to-connection.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4886155" data-ref="3_4886155" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4809321_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4809321xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4809321" parent="0" thread="4809321" href="http://www.codeproject.com/Messages/4809321/Extremely-useful-thank-you.aspx">Extremely useful, thank you.</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=1154093">Member 1154093</a></td><td class="date">28-Apr-14  14:54&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4809321_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="1154093" msgid="4809321" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Seriously, you should consider writing.<br>
Thank you.<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4809321" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4809321/Extremely-useful-thank-you.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4809321" data-ref="3_4809321" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4807213_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4807213xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4807213" parent="0" thread="4807213" href="http://www.codeproject.com/Messages/4807213/Missing-steps.aspx">Missing steps.</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=755067">dingaling</a></td><td class="date">24-Apr-14  13:51&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4807213_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="755067" msgid="4807213" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">If this is aimed at beginner like me then it's not doing a good job.<br>
Seems like there are a lot of missing steps.  I couldn't follow this.<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4807213" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4807213/Missing-steps.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4807213" data-ref="3_4807213" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4782000_h0" class="header hover-row root">
<td class="subject-line normal  vote-lo" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4782000xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4782000" parent="0" thread="4782000" href="http://www.codeproject.com/Messages/4782000/jsonResponse-having-null-values.aspx">jsonResponse having null values.</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10678870">MUHAMMAD ALI</a></td><td class="date">19-Mar-14  5:09&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4782000_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10678870" msgid="4782000" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">i followed the instructions, now at the end, jsonResponse has: <pre>{<span class="code-string">"</span><span class="code-string">sEcho"</span>:<span class="code-string">"</span><span class="code-string">1"</span>,<span class="code-string">"</span><span class="code-string">iTotalRecords"</span>:null,<span class="code-string">"</span><span class="code-string">iTotalDisplayRecords"</span>:null}</pre>
And my jsp page is constantly saying "processing..."<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4782000" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4782000/jsonResponse-having-null-values.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4782000" data-ref="3_4782000" class="rating-label" style="white-space:nowrap;"><span>1.00/5 (1 vote)</span></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4764677_h0" class="header hover-row root">
<td class="subject-line normal  vote-hi" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4764677xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4764677" parent="0" thread="4764677" href="http://www.codeproject.com/Messages/4764677/Datatable-not-getting-displayed.aspx">Datatable not getting displayed</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=4647112">javedsh</a></td><td class="date">21-Feb-14  9:50&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4764677_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="4647112" msgid="4764677" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Created the server side processing where the query is 
getting populated from the servlet in json format but in the jsp side 
its only displaying header<br>
&nbsp;<br>
Please suggest where have the I gone wrong<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4764677" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4764677/Datatable-not-getting-displayed.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4764677" data-ref="3_4764677" class="rating-label" style="white-space:nowrap;"><span>5.00/5 (1 vote)</span></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4747831_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4747831xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4747831" parent="0" thread="4747831" href="http://www.codeproject.com/Messages/4747831/Hii.aspx">Hii</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=7899684">Sarvesh Kushwaha</a></td><td class="date">29-Jan-14  20:37&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4747831_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="7899684" msgid="4747831" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Can i achieve this following functionality with jquery datatabble <a href="http://stackoverflow.com/questions/21432217/jquery-datatable-search-using-a-form">http://stackoverflow.com/questions/21432217/jquery-datatable-search-using-a-form</a>[<a href="http://stackoverflow.com/questions/21432217/jquery-datatable-search-using-a-form" target="_blank" title="New Window">^</a>]<br>
&nbsp;<br>
<br>
Thanks fr your help  <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/smiley_smile.gif" alt="Smile | :)" align="top"> <br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4747831" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4747831/Hii.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4747831" data-ref="3_4747831" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4688345_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4688345xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4688345" parent="0" thread="4688345" href="http://www.codeproject.com/Messages/4688345/Data-not-displaying-in-Data-table.aspx">Data not displaying in Data table</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10364124">Member 10364124</a></td><td class="date">27-Oct-13  22:49&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4688345_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10364124" msgid="4688345" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi Jovan Popovic,<br>
As u said i tried in the smiliar way <br>
$("#jQueryInvoices").dataTable({<br>
        "bServerSide": true,<br>
        "sAjaxSource": 
"/audit/listinvoice.do?action=getInvoices&amp;carrierId=22&amp;customerId=12096&amp;shipperId=-1&amp;status=Open&amp;invoiceNumber=&amp;toDateStr=&amp;fromDateStr=&amp;controlNumber=&amp;runNumber=&amp;dateCriteria=billDate&amp;glCode=-1",<br>
        "bProcessing": true,<br>
        "sPaginationType": "full_numbers",<br>
        "bJQueryUI": true,<br>
        "aoColumns": [<br>
                      { "mDataProp": "invoiceNumber" },<br>
                      { "mDataProp": "invoiceAmount" },<br>
                      { "mDataProp": "contractNumber" },<br>
                      { "mDataProp": "status" }<br>
                  ]<br>
    });<br>
&nbsp;<br>
}<br>
and in Html i build table as:<br>
<pre lang="xml"><span class="code-keyword">&lt;</span><span class="code-leadattribute">div</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">demo_jui"</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-leadattribute">table</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">jQueryInvoices"</span>  <span class="code-attribute">class</span><span class="code-keyword">="</span><span class="code-keyword">display"</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                                    <span class="code-keyword">&lt;</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Invoice Number<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Invoice Amount<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Contract Number<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Status<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                    <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">table</span><span class="code-keyword">&gt;</span>
            <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">div</span><span class="code-keyword">&gt;</span></pre>
I'm getting response from server as :<br>
<pre lang="cs">{<span class="code-string">"</span><span class="code-string">aaData"</span>:[
{<span class="code-string">"</span><span class="code-string">invoiceAmount"</span>:<span class="code-digit">92</span>.<span class="code-digit">67</span>,
customerId<span class="code-string">"</span><span class="code-string">:12096,"</span>
contractNumber<span class="code-string">"</span><span class="code-string">:"</span><span class="code-digit">11</span>
status<span class="code-string">"</span><span class="code-string">:"</span>Open<span class="code-string">"</span><span class="code-string">,"</span>
invoiceId<span class="code-string">"</span><span class="code-string">:9715002,"</span>
billDate<span class="code-string">"</span><span class="code-string">:"</span>09/16/2013<span class="code-string">"</span><span class="code-string">,"</span>
invoiceNumber<span class="code-string">"</span><span class="code-string">:"</span><span class="code-digit">240198645</span><span class="code-string">"</span><span class="code-string">,"</span>
lastUpdateDate<span class="code-string">"</span><span class="code-string">:"</span>09/15/2013<span class="code-string">"</span><span class="code-string">,"</span>
fromLiveDB<span class="code-string">"</span><span class="code-string">:true,"</span>
sumApprovedAmt<span class="code-string">"</span><span class="code-string">:48.86,"</span>
shipperCode<span class="code-string">"</span><span class="code-string">:"</span><span class="code-digit">239253008</span><span class="code-string">"</span><span class="code-string">,"</span>
closedCount<span class="code-string">"</span><span class="code-string">:16}</span></pre>
&nbsp;<br>
<br>
but my data table is showing only with table headers , no data is 
displayed. Here in response i will complete bean object ,but i have to 
display only specific columns and i mentioned those in oColumns 
attribute. Could you please help me out on this where i went wrong??<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4688345" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4688345/Data-not-displaying-in-Data-table.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4688345" data-ref="3_4688345" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4688340_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4688340xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4688340" parent="0" thread="4688340" href="http://www.codeproject.com/Messages/4688340/Data-not-displaying-in-Data-tbale.aspx">Data not displaying in Data tbale</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10364124">Member 10364124</a></td><td class="date">27-Oct-13  22:43&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4688340_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10364124" msgid="4688340" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi Jovan Popovic,<br>
As u said i tried in the smiliar way <br>
$("#jQueryInvoices").dataTable({<br>
        "bServerSide": true,<br>
        "sAjaxSource": 
"/audit/listinvoice.do?action=getInvoices&amp;carrierId=22&amp;customerId=12096&amp;shipperId=-1&amp;status=Open&amp;invoiceNumber=&amp;toDateStr=&amp;fromDateStr=&amp;controlNumber=&amp;runNumber=&amp;dateCriteria=billDate&amp;glCode=-1",<br>
        "bProcessing": true,<br>
        "sPaginationType": "full_numbers",<br>
        "bJQueryUI": true,<br>
        "aoColumns": [<br>
                      { "mDataProp": "invoiceNumber" },<br>
                      { "mDataProp": "invoiceAmount" },<br>
                      { "mDataProp": "contractNumber" },<br>
                      { "mDataProp": "status" }<br>
                  ]<br>
    });<br>
&nbsp;<br>
}<br>
and in Html i build table as:<br>
<pre lang="xml"><span class="code-keyword">&lt;</span><span class="code-leadattribute">div</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">demo_jui"</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-leadattribute">table</span> <span class="code-attribute">id</span><span class="code-keyword">="</span><span class="code-keyword">jQueryInvoices"</span>  <span class="code-attribute">class</span><span class="code-keyword">="</span><span class="code-keyword">display"</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                                    <span class="code-keyword">&lt;</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Invoice Number<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Invoice Amount<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Contract Number<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                        <span class="code-keyword">&lt;</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>Status<span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">th</span><span class="code-keyword">&gt;</span>
                                    <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tr</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">thead</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
                                <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">tbody</span><span class="code-keyword">&gt;</span>
                            <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">table</span><span class="code-keyword">&gt;</span>
            <span class="code-keyword">&lt;</span><span class="code-keyword">/</span><span class="code-leadattribute">div</span><span class="code-keyword">&gt;</span></pre>
I'm getting response from server as :<br>
<pre lang="cs">{<span class="code-string">"</span><span class="code-string">aaData"</span>:[
{<span class="code-string">"</span><span class="code-string">invoiceAmount"</span>:<span class="code-digit">92</span>.<span class="code-digit">67</span>,
customerId<span class="code-string">"</span><span class="code-string">:12096,"</span>
contractNumber<span class="code-string">"</span><span class="code-string">:"</span><span class="code-digit">11</span>
status<span class="code-string">"</span><span class="code-string">:"</span>Open<span class="code-string">"</span><span class="code-string">,"</span>
invoiceId<span class="code-string">"</span><span class="code-string">:9715002,"</span>
billDate<span class="code-string">"</span><span class="code-string">:"</span>09/16/2013<span class="code-string">"</span><span class="code-string">,"</span>
invoiceNumber<span class="code-string">"</span><span class="code-string">:"</span><span class="code-digit">240198645</span><span class="code-string">"</span><span class="code-string">,"</span>
lastUpdateDate<span class="code-string">"</span><span class="code-string">:"</span>09/15/2013<span class="code-string">"</span><span class="code-string">,"</span>
fromLiveDB<span class="code-string">"</span><span class="code-string">:true,"</span>
sumApprovedAmt<span class="code-string">"</span><span class="code-string">:48.86,"</span>
shipperCode<span class="code-string">"</span><span class="code-string">:"</span><span class="code-digit">239253008</span><span class="code-string">"</span><span class="code-string">,"</span>
closedCount<span class="code-string">"</span><span class="code-string">:16}</span></pre>
&nbsp;<br>
<br>
but my data table is showing only with table headers , no data is 
displayed. Here in response i will complete bean object ,but i have to 
display only specific columns and i mentioned those in oColumns 
attribute. Could you please help me out on this where i went wrong??<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4688340" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4688340/Data-not-displaying-in-Data-tbale.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4688340" data-ref="3_4688340" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4686456_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4686456xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4686456" parent="0" thread="4686456" href="http://www.codeproject.com/Messages/4686456/My-Vote-of-Five.aspx">My Vote of Five..</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10354980">Member 10354980</a></td><td class="date">24-Oct-13  3:46&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4686456_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10354980" msgid="4686456" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">nice post..helped me lot..<br>
thanks a lot for posting this article...<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4686456" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4686456/My-Vote-of-Five.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4686456" data-ref="3_4686456" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4658774_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4658774xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4658774" parent="0" thread="4658774" href="http://www.codeproject.com/Messages/4658774/Creating-an-expandable-master-details-table-jQuery.aspx">Creating an expandable master-details table (jQuery DataTables) in Java Web Application</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10162408">Member 10162408</a></td><td class="date">12-Sep-13  12:07&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4658774_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10162408" msgid="4658774" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi, <br>
&nbsp;<br>
I am working on show/hide details rows using jQuery DataTables in Java 
Web Application and don't have any idea it can be achieved or not. I saw
 one of this example but its ASP.NET MVC integration. <br>
&nbsp;<br>
I am looking if anybody could post an example on this topic using java.<br>
<a href="http://datatables.net/examples/server_side/row_details.html"></a><br>
&nbsp;<br>
Thanks in advance.<br>
&nbsp;<br>
Nick<br>
<div class="signature">Nick</div><br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4658774" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4658774/Creating-an-expandable-master-details-table-jQuery.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4658774" data-ref="3_4658774" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4655254_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4655254xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4655254" parent="0" thread="4655254" href="http://www.codeproject.com/Messages/4655254/Integrate-Server-Side-DataTable-in-Spring-MVC-Hibe.aspx">Integrate Server Side DataTable in Spring MVC Hibernate</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10253536">Member 10253536</a></td><td class="date">8-Sep-13  16:59&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4655254_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10253536" msgid="4655254" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi Everyone,<br>
&nbsp;<br>
I wonder if any one could post an example with Server Side jQuery DataTable integrated in Spring MVC hibernate project.<br>
&nbsp;<br>
Thank you in advance.<br>
&nbsp;<br>
Nick<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4655254" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4655254/Integrate-Server-Side-DataTable-in-Spring-MVC-Hibe.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4655254" data-ref="3_4655254" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4643359_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4643359xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4643359" parent="0" thread="4643359" href="http://www.codeproject.com/Messages/4643359/Source-code-for-the-Java-classes-JQueryDataTablePa.aspx">Source code for the Java classes? JQueryDataTableParam and DataTablesParam</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10226095">Member 10226095</a></td><td class="date">22-Aug-13  10:49&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4643359_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10226095" msgid="4643359" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">I don't see the java source code for this example in the
 download. I would especially like to get a hold of the  
JQueryDataTableParamModel and DataTablesParamUtility classes. I don't 
see a library for them any where.<br>
Does any one know how to get a hold of this?<br>
&nbsp;<br>
Thanks.<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4643359" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4643359/Source-code-for-the-Java-classes-JQueryDataTablePa.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4643359" data-ref="3_4643359" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4641937_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4641937xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4641937" parent="0" thread="4641937" href="http://www.codeproject.com/Messages/4641937/JED-is-the-way-to-go.aspx">JED is the way to go [modified]</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10223071">Member 10223071</a></td><td class="date">21-Aug-13  4:22&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4641937_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10223071" msgid="4641937" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">If you are looking for CRUD (Create,Read,Update,and 
Delete) functionality on the server side for the Java platform, JED has 
just been released.  Check it out: <a href="http://jed-datatables.ca/">http://jed-datatables.ca</a>
 You won't have to hard code your data to display in DataTables. You can
 create whatever tables in your database and JED will retrieve them for 
you and send the appropriate JSON string to the client side.<br><br><div class="modified">modified  21-Aug-13 9:42am.</div><br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4641937" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4641937/JED-is-the-way-to-go.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4641937" data-ref="3_4641937" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4614054_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4614054xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_general.gif" alt="General" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4614054" parent="0" thread="4614054" href="http://www.codeproject.com/Messages/4614054/My-vote-of.aspx">My vote of 5</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=6925835">Luciano Gallo</a></td><td class="date">17-Jul-13  1:31&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4614054_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="6925835" msgid="4614054" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Many thanks. Clear and really usefull!<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4614054" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4614054/My-vote-of.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4614054" data-ref="3_4614054" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4597802_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4597802xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4597802" parent="0" thread="4597802" href="http://www.codeproject.com/Messages/4597802/DataTable-Column-filters.aspx">DataTable Column filters</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-group-16.gif" title="group" alt="group" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=10059016">sonusntsh</a></td><td class="date">26-Jun-13  3:59&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4597802_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="10059016" msgid="4597802" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hello sir, I am using DataTable from server side 
processing from java. I took help from your pervious post at jQuery 
DataTables in Java Web Applications[^]. Now I need to implement column 
filtering in my datatable. I have tried with the given column filtering 
plugin but it does not works for server side. Plz help..!<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4597802" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4597802/DataTable-Column-filters.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4597802" data-ref="3_4597802" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4557505_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4557505xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4557505" parent="0" thread="4557505" href="http://www.codeproject.com/Messages/4557505/Refresh-ajax-Source-A-Servlet-that-return-result-q.aspx">Refresh ajax Source (A Servlet that return result query from MySQL) When database change (insert, update, delete).</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9589558">Member 9589558</a></td><td class="date">5-May-13  18:24&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4557505_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9589558" msgid="4557505" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">I use jquery datatable with Ajax source = Servlet (Select * from ...)<br>
&nbsp;<br>
Problem: When I <b>delete a record</b> from database, but my web application <b>exist that record<br>
</b><br>
&nbsp;<br>
??? I want refresh jdatatable when my database table have a changing. Or refresh after a period of time<br>
&nbsp;<br>
My a little javascripts ajax source.<br>
&nbsp;<br>
<pre lang="Javascript">                <u><span class="code-string">"</span><span class="code-string">bServerSide"</span>: <span class="code-keyword">true</span></u>, 
                <span class="code-string">"</span><span class="code-string">bProcessing"</span>: <span class="code-keyword">true</span>,
                <span class="code-string">"</span><span class="code-string">sAjaxSource"</span>: <span class="code-string">"</span><span class="code-string">/OpenClasses/NhuCauHocAjax"</span>,
                <span class="code-string">"</span><span class="code-string">sPaginationType"</span>: <span class="code-string">"</span><span class="code-string">full_numbers"</span>,
                <span class="code-string">"</span><span class="code-string">bJQueryUI"</span>: <span class="code-keyword">true</span>,</pre>
<div class="signature">tvviem.</div><br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4557505" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4557505/Refresh-ajax-Source-A-Servlet-that-return-result-q.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4557505" data-ref="3_4557505" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4553037_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4553037xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4553037" parent="0" thread="4553037" href="http://www.codeproject.com/Messages/4553037/How-to-read-jQuery-DataTable-data-at-dynamically-w.aspx">How to read jQuery DataTable data at dynamically when fields are unknown?</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9467736">Member 9467736</a></td><td class="date">29-Apr-13  21:30&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4553037_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9467736" msgid="4553037" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hello,<br>
      i want to ask how can i read DataTables Data dynamically? in this 
project passing field name by aoColumns through javascript but when we 
added column at run time in database table i am able to retrieving data 
and fetching in DataTable from database but i want to make changes in 
DataTables Cell how i can read dynamically that cell's data in java 
servlet not in javascript. in this situation request.getParameter() not 
worked. plz give me an example to make understand. <br>
&nbsp;<br>
plz tell me how can i read DataTables Data dynamically?<br>
&nbsp;<br>
plz help me out.<br>
&nbsp;<br>
Thanks alot!<br>
<div class="signature">pooja bhasin</div><br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4553037" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4553037/How-to-read-jQuery-DataTable-data-at-dynamically-w.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4553037" data-ref="3_4553037" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4545020_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4545020xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_general.gif" alt="General" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4545020" parent="0" thread="4545020" href="http://www.codeproject.com/Messages/4545020/My-vote-of.aspx">My vote of 5</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-pro-16.png" title="professional" alt="professional" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9998459">somnathdgaikwad</a></td><td class="date">18-Apr-13  22:55&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4545020_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9998459" msgid="4545020" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">With simple examples you have<br>
stated a good article about JQuery.<br>
   Thank You.<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4545020" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4545020/My-vote-of.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4545020" data-ref="3_4545020" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4459124_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4459124xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4459124" parent="0" thread="4459124" href="http://www.codeproject.com/Messages/4459124/Works-too-Slow-with-Large-Data.aspx">Works too Slow with Large Data</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9709163">Shri Ram Bhandari</a></td><td class="date">24-Dec-12  10:06&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4459124_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9709163" msgid="4459124" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">It applies the sorting on all the columns.<br>
&nbsp;<br>
It works too slow when we have data in thousands ?<br>
&nbsp;<br>
Any idea how can we improvise in that ??<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4459124" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4459124/Works-too-Slow-with-Large-Data.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4459124" data-ref="3_4459124" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4434653_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4434653xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4434653" parent="0" thread="4434653" href="http://www.codeproject.com/Messages/4434653/Pagination-with-filter-for-a-dynamic-data.aspx">Pagination with filter for a dynamic data</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9623458">Member 9623458</a></td><td class="date">22-Nov-12  20:39&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4434653_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9623458" msgid="4434653" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi,<br>
 I need pagination with filter in which filter must be done on whole 
list regard less of page in struts 1.x..List is coming from Action class
 (from Database). I have tried many ways but no success..<br>
Can u please help me out <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/smiley_smile.gif" alt="Smile | :)" align="top"> <br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4434653" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4434653/Pagination-with-filter-for-a-dynamic-data.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4434653" data-ref="3_4434653" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4431056_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4431056xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_news.gif" alt="News" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4431056" parent="0" thread="4431056" href="http://www.codeproject.com/Messages/4431056/DataTables-j.aspx">DataTables4j</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9612004">DataTables4j</a></td><td class="date">19-Nov-12  5:09&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4431056_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9612004" msgid="4431056" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi,<br>
&nbsp;<br>
Highly comprehensive article ! Great job !<br>
&nbsp;<br>
You can also take a look at DataTables4j [1], which embeds a servlet 
implementation and client-side generation (with compression and 
aggregation features) for DataTables. <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/smiley_smile.gif" alt="Smile | :)" align="top"> <br>
You can browse an online demo application [2] which uses DataTables4j with Spring/Spring MVC.<br>
&nbsp;<br>
It's still under development but very promising !  <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/smiley_tongue.gif" alt="Poke tongue | ;-P" align="top">  <br>
&nbsp;<br>
Regards,<br>
Thibault Duchateau<br>
&nbsp;<br>
[1] <a href="http://datatables4j.github.com/docs">http://datatables4j.github.com/docs</a><br>
[2] <a href="http://datatables4j-examples.datatables4j.cloudbees.net/">http://datatables4j-examples.datatables4j.cloudbees.net/</a><br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4431056" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4431056/DataTables-j.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4431056" data-ref="3_4431056" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4416879_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4416879xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_general.gif" alt="General" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4416879" parent="0" thread="4416879" href="http://www.codeproject.com/Messages/4416879/My-vote-of.aspx">My vote of 5</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=8070111">acidb1</a></td><td class="date">1-Nov-12  9:50&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4416879_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="8070111" msgid="4416879" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">excellent article!.<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4416879" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4416879/My-vote-of.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4416879" data-ref="3_4416879" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4404209_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4404209xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_general.gif" alt="General" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4404209" parent="0" thread="4404209" href="http://www.codeproject.com/Messages/4404209/My-vote-of.aspx">My vote of 5</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=2002553">fellippe</a></td><td class="date">20-Oct-12  2:20&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4404209_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="2002553" msgid="4404209" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">super!<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4404209" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4404209/My-vote-of.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4404209" data-ref="3_4404209" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr id="F4385980_h0" class="header hover-row root">
<td class="subject-line normal " width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="indent" width="20px"><a name="xx4385980xx"></a><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"></td><td class="subject hover-container"><a class="message-link" name="4385980" parent="0" thread="4385980" href="http://www.codeproject.com/Messages/4385980/Table-widget-with-struts.aspx">Table widget with struts</a> <a onclick="return Pin(this);" href="#" title="Click to pin message"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/pin.png" alt="Pin" align="top" border="0" height="13px" width="13px"></a></td><td class="icon"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/icn-member-16.gif" title="member" alt="member" border="0" height="16px"></td><td class="author"><a href="http://www.codeproject.com/script/Membership/View.aspx?mid=9478772">Member 9478772</a></td><td class="date">2-Oct-12  14:11&nbsp;</td>
</tr>
</tbody></table></td>
</tr><tr id="F4385980_h1" class="content root selected" style="display:none;">
<td class="normal" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td class="indent align-right" style="width:20px;"><div class="voteform vertical" ownerid="9478772" msgid="4385980" votingtype="GoodOrBad">

</div><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" height="1px" width="20px"></td><td class="text"><table border="0" cellpadding="0" cellspacing="5px" width="100%">
<tbody><tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">Hi,<br>
First of all, great tutorial.<br>
&nbsp;<br>
Second, I was trying to hook up this server side code to a struts action
 (instead of a servlet uri) and its not even calling that struts action 
class for unknown reason. I could not figure that out.<br>
&nbsp;<br>
Any idea about it? Can you maybe try hooking up your server side code ti a struts action and see if that works or not for you?<br>
&nbsp;<br>
Thanks<br>
Aashish Dalmia<br></td>
</tr><tr class="footer" style="vertical-align:top;">
<td><a href="http://www.codeproject.com/script/Membership/LogOn.aspx?rp=%2fArticles%2f359750%2fjQuery-DataTables-in-Java-Web-Applications">Sign In</a>·<wbr><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;sort=Position&amp;spc=Relaxed&amp;tid=4385980" title="View&nbsp;Thread">View&nbsp;Thread</a>·<wbr><a href="http://www.codeproject.com/Messages/4385980/Table-widget-with-struts.aspx" title="Get permanent link">Permalink</a></td><td style="text-align:right;"><span id="MVF4385980" data-ref="3_4385980" class="rating-label" style="white-space:nowrap;"></span></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr><tr>
<td><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/t_002.gif" alt="" border="0" height="5px" width="1px"></td>
</tr><tr>
<td><table cellpadding="2px" cellspacing="0" width="100%">
<tbody><tr class="footer">
<td>Last Visit: 31-Dec-99  19:00 &nbsp; &nbsp; Last Update: 18-Dec-14  10:53</td><td><a href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed">Refresh</a></td><td style="text-align:right;white-space:nowrap;"><input id="_mbnUrl" value="/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed&amp;fr=26" type="hidden"><span class="nav-link selected">1</span><a class="nav-link" name="Frm_HoverNL" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed&amp;fr=26#xx0xx">2</a> <a class="nav-link" name="Frm_HoverNL" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?fid=1703289&amp;df=90&amp;mpp=25&amp;noise=3&amp;prof=False&amp;sort=Position&amp;view=Normal&amp;spc=Relaxed&amp;fr=26#xx0xx">Next »</a></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
</div><p class="small-text"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_general.gif" alt="General" align="top" height="16px" width="16px"> General &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_news.gif" alt="News" align="top" height="16px" width="16px"> News &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_idea.gif" alt="Suggestion" align="top" height="16px" width="16px"> Suggestion &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_question.gif" alt="Question" align="top" height="16px" width="16px"> Question &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_bug.gif" alt="Bug" align="top" height="16px" width="16px"> Bug &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_answer.gif" alt="Answer" align="top" height="16px" width="16px"> Answer &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_joke.gif" alt="Joke" align="top" height="16px" width="16px"> Joke &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_rant.gif" alt="Rant" align="top" height="16px" width="16px"> Rant &nbsp;&nbsp; <img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/msg_admin.gif" alt="Admin" align="top" height="16px" width="16px"> Admin &nbsp;&nbsp; </p><p class="small-text">Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.</p>
				

			</div>
			
		</td>
		<td width="170px">
			<div id="ctl00_RightSideBar" class="container-article-info">

    			

<div class="header">Info</div>
<div class="article-summary">

<a id="ctl00_InfoBox_ParentLink"></a>

<table class="article-info" cellpadding="0" cellspacing="0">

    

    
	

	
	

	

	

	

	<tbody><tr><td>First Posted&nbsp;</td><td class="value" nowrap="nowrap"><span itemprop="datePublished" content="2012-04-07">7 Apr 2012</span></td></tr>

	<tr><td>Views&nbsp;</td><td class="value">142,300</td></tr>

	
	<tr><td>Downloads&nbsp;</td><td class="value">8,648</td></tr>
		

	
	<tr><td>Bookmarked&nbsp;</td><td class="value">34 times</td></tr>
	

	

	

    

	<tr><td colspan="2"></td></tr>
	
	
</tbody></table>
</div>

                <div style="position: fixed; top: 10px; left: 1060.5px;" id="RHSticky" class="container-article-info-sticky stuck">
				    

                    
                    <div class="padded-top">
                        
                    </div>

				    <div style="width:160px;margin: 10px auto;">
					    <div class="msg-160x600" data-format="160x600" data-type="ad" data-publisher="lqm.codeproject.site" data-zone="Languages/Java/General" data-tags="Java, Ajax, jQuery, DataTable,rating4.5"><iframe id="dmad5" allowtransparency="false" style="z-index:10" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="600" width="160"></iframe></div>
				    </div>

				    

				    

				    
				</div>

			</div>
		</td>
		</tr></tbody></table>

		
		<div class="theme1-background" style="height:2px" id="stickyStop"></div>

		<div class="extended tiny-text">
			<div class="row">
				<div class="float-left">
					<a id="ctl00_PermaLink" itemprop="url" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications">Permalink</a> | 
					<a id="ctl00_AdvertiseLink" href="http://developermedia.com/">Advertise </a> |
					<a id="ctl00_PrivacyLink" href="http://www.codeproject.com/info/privacy.aspx">Privacy</a> |
                    <a id="ctl00_TermsOfUseLink" href="http://www.codeproject.com/info/TermsOfUse.aspx">Terms of Use</a> |
					<a id="ctl00_Mobile" rel="nofollow" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?display=Mobile">Mobile</a>
					<br>
								
					
					Web01 |
					2.8.141216.1 |
					Last Updated 26 Apr 2012								
				</div>

                <div id="ctl00_GoogleTranslate" class="translate float-left"><div style="" dir="ltr" class="skiptranslate goog-te-gadget"><div class="goog-te-gadget-simple" style="white-space: nowrap;" id=":0.targetLanguage"><img style="background-image: url(&quot;https://translate.googleapis.com/translate_static/img/te_ctrl3.gif&quot;); background-position: -65px 0px;" class="goog-te-gadget-icon" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/cleardot.gif"><span style="vertical-align: middle;"><a href="javascript:void(0)" class="goog-te-menu-value"><span>Select Language</span><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/cleardot.gif" height="1" width="1"><span style="border-left: 1px solid rgb(187, 187, 187);">​</span><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/cleardot.gif" height="1" width="1"><span style="color: rgb(155, 155, 155);">▼</span></a></span></div></div></div>      

				<div class="float-right align-right">
					Article Copyright 2012 by Jovan Popovic<br>Everything else
					Copyright © <a href="mailto:webmaster@codeproject.com">CodeProject</a>, 1999-2014 <br>
				</div>

				


<div class="page-width">
Layout: <a id="ctl00_PageWidth_FixedT" title="Fixed width layout" rel="nofollow" class=" active" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?PageFlow=FixedWidth">fixed</a>
|
<a id="ctl00_PageWidth_FluidT" title="Fluid layout" rel="nofollow" href="http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications?PageFlow=Fluid">fluid</a>
</div>



			</div>
		</div>
		

		<br clear="all">
		
			

	</div> 
	</div>
</div>


<div style="display:none;" id="dm_AdTable">
	
</div>
<img id="ctl00_Audience" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/DFPAudiencePixel.gif" style="border-width:0px;height:1px;width:1px;">



<script type="text/javascript" language="Javascript" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/jquery.js"></script><script type="text/javascript">//<![CDATA[
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/script/JS/jquery-1.6.2.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]></script>
<script type="text/javascript" language="Javascript" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/article.js"></script>
<script type="text/javascript" language="Javascript" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/element.js"></script>
<script type="text/javascript" language="Javascript" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/navbar.js"></script>
<script type="text/javascript" language="Javascript" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/Notifications.js"></script>
<script type="text/javascript" language="Javascript">//<![CDATA[
function googleTranslateElementInit() {  new google.translate.TranslateElement({   pageLanguage: 'en',   layout: google.translate.TranslateElement.InlineLayout.SIMPLE,   autoDisplay: false,   gaTrack: true,   gaId: 'UA-1735123-1'},  'ctl00_GoogleTranslate');}
$(document).ready(function() { anchorAnimate();
$('#RHSticky').sticky($('#stickyStop'));
$('#ctl00_Nav').sticky($('#stickyStop'));
});
$(function() {
                                            var $downloads =  $('ul.download');
                                            $downloads.addClass('float-left')
                                                        .wrap('<div class="row"></div>');
                                            $downloads.after('<div class="float-left" style="margin-top:25px;margin-left:30px"><div data-format="1x11" data-type="ad" data-publisher="lqm.codeproject.site" data-zone="downloadlink" data-tags="java%2cajax%2cjquery%2cdatatable"></div></div>');
                                    });
$(function ()
                {
                    $('.oauth').click(function () {
                        $this = $(this);
                        href = $this.attr('href');
                        var myWindow = window.open(href, 'popup',
                                    'width=800,height=600,location=0,menubar=0,resizeable=0,scrollbars=0,toolbar=0');
                        myWindow.focus();
                        var timer = setInterval(function () {
                                        if (myWindow.closed) {
                                            clearInterval(timer);
                                            // window.location.reload(); // May do a POST reload, shows a warning
                                            window.location = window.location; // force a GET reload
                                        }
                                    }, 200);
                        return false;
                    });
                });
var oSrchFlt = false, oSrchBox=false,srchBoxFoc=false;
$(document).ready(function() {
 if(InitWatermark)InitWatermark('sb_tb', 'Search for articles, questions, tips');
 var sbar = $('#sb_tb'); 
 var sfilter = $('#SearchFilter');
 if (sbar && sfilter) {
  sfilter.removeClass('popup'); sfilter.hide(); sfilter.removeClass('open');
  sbar.blur(function() {
 if (!oSrchFlt) {sfilter.hide(); sfilter.removeClass('open');}
 srchBoxFoc=false;
 });
  sbar.focus(function() {
 oSrchFlt=false; srchBoxFoc=true;
 sfilter.show(); sfilter.addClass('open');
 });
  sbar.mouseleave(function() { oSrchBox=false; });
  sbar.mouseover(function() { oSrchBox=true; });
  sfilter.mouseleave(function() { oSrchFlt=false; if (!srchBoxFoc&&!oSrchBox) { sfilter.hide(); sfilter.removeClass('open'); }});
  sfilter.mouseover(function() { oSrchFlt=true; });
 }
});
$('#clear-rate_ctl00_RateArticle_RSU').click(function () {    $('#ctl00_RateArticle_RSU').hide(); return false;});$("#ctl00_RateArticle_RateItemWrapper")   .removeClass("container-rating")   .hover( function() { $('#ctl00_RateArticle_RSU').fadeIn('fast'); },            function() { $('#ctl00_RateArticle_RSU').fadeOut('fast'); } );
function PostBack_ctl00_RateArticle_RateItemWrapper() {
  return rateItem(359750,2,1,true,true,3,'LargeStars');
}

                        function getVotesHistogram(objectId, objectTypeId, containerId, loadingId) {
                            if (!$('#' + containerId).attr('alreadyRequested')){
                                $.ajax({
                                    url: '/script/Ratings/Ajax/Histogram.aspx?obid=' + objectId + '&obtid='+objectTypeId,
                                    success: function (data) {
                                        $('#' + containerId).html(data);
                                        $('#' + loadingId).hide();
                                    }
                                });
                                $('#' + containerId).attr('alreadyRequested', 'true');
                            }
                        }
$(document).ready(function() {   new starRating('#ctl00_RateArticle_VoteFormDiv', PostBack_ctl00_RateArticle_RateItemWrapper,'ctl00_RateArticle');
  $('#ctl00_RateArticle_RB').mouseenter(function() {     getVotesHistogram(359750,2   ,'ctl00_RateArticle_Histogram','ctl00_RateArticle_Loading');  })})
$(document).ready(function() { $('#ctl00_RateArticle_SubmitRateBtn').hide(); });
$(document).ready(function() { $('#ctl00_RateArticle_SubmitRateBtn').hide(); });function ChkRtctl00_RateArticle(){}

forumDir = '/script/Forums/';
staticServer = '//dj9okeyxktdvd.cloudfront.net';
allowReporting = false;
allowRating = false;
allowRatingDisplay = true;
var smoothScroll = false;
Selected        = -1;
oldTitle        = document.title;
minMessageScore = 1;
minMessageScore = 5;
abuseScore      = -2;
spamScore       = -1;
getRatingUrl    = '/script/Ratings/Ajax/GetRatings.aspx';
noiseThreshold  = 3;
getRatingRefKey = 'obrs';


//]]>
</script>



<canvas id="cv1" width="1px" height="1px" style="position:absolute;left:0;top:0;pointer-events:none"></canvas><div id="goog-gt-tt" class="skiptranslate" dir="ltr"><div style="padding: 8px;"><div><div class="logo"><img src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/translate-32.png" height="20" width="20"></div><iframe style="width:348px;height:1.1em;float:right;" id="signin_status" border="0" src="jQuery%20DataTables%20in%20Java%20Web%20Applications%20-%20CodeProject_files/tminfo.htm" frameborder="0"></iframe></div></div><div class="top" style="padding: 8px; float: left; width: 100%;"><h1 class="title gray">Original text</h1></div><div class="middle" style="padding: 8px;"><div class="original-text"></div></div><div class="bottom" style="padding: 8px;"><div class="activity-links"><span class="activity-link">Contribute a better translation</span><span class="activity-link"></span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div style="display: none;" class="status-message"></div></div><canvas id="cv2" width="1px" height="1px" style="position:absolute;left:0;top:0;pointer-events:none"></canvas><iframe style="visibility: visible; box-sizing: content-box; width: 860px; height: 285px; display: none;" class="goog-te-menu-frame skiptranslate" frameborder="0"></iframe><canvas style="display: none;" height="14917" width="1423"></canvas></body></html>